Novo layout + Tutorial: Efeito para moderadores


Olá.

É com muito prazer que eu apresento o novo layout do Plush Clouds, ele foi feito todo por mim com ajuda dos blogs  //  //  //  e com uma pequena ajuda e inspiração do , eu simplesmente adorei esse layout e acho que a Selena combinou muito com ele, por ser simples e bonito.

Para o primeiro post com esse layout eu quis trazer um tutorial de um efeito lindo e simples que eu achei do Crazy HTML, ele é melhor para usar nos administradores por isso é chamado de efeito para moderados. Prévia: ♥ ~~.


1. Vá até editar HTML e procure por ]]></b:skin>. Achou ? Agora cole o código abaixo acima do procurado.

.modcaixa {background-color:#eeefef;padding:6px;width:290px;overflow:hidden}
.modimg {
background-color: #;
padding: 1px;margin-left: 2px; ; z-index: 400; 
 margin-right: 3px;margin:0px 4px 3px -4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.h8 {font-size:  19px;font-family: 'Nunito', cursive;  color: #fff; padding:px;  margin-bottom: 0px; text-indent : 10px; text-shadow: 0px 2px 2px #6891a4;margin-bottom:3px;margin-top:-10px;background:#68a6c2;padding-bottom:2px; text-transform: uppercase;
}
@font-face {font-family: "Pf arma five"; src: url('http://static.tumblr.com/kflakjl/BsGmdyz83/font.ttf');}
.moddescri { font-size: 8px; font-family:"Pf arma five", small fonts;; text-transform:uppercase;color:#999;}
.divso {padding:5px;float:center;margin:5px 5px 5px 5px;}
.modcaixa b{color:#f7bbb7;
}
Edite as cores como desejar, agora visualize se estiver tudo certo salve.

2. Para usar você deve adicionar um gadget HTML/JavaScript e no conteúdo dele colar o código abaixo.

<div class="modcaixa">
<img align="left" class="modimg" height="64px" src="http://24.media.tumblr.com/tumblr_mdyyfjOcBx1rrq56fo2_r1_250.png" width:64px="width:64px" />
<br />
<div class="h8">
Oiii :3</div>
<div class="moddescri">
Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre você </div>
<span style="color: transparent;">.</span>
<img align="left" class="modimg" height="64px" src="http://25.media.tumblr.com/tumblr_mele17XYLu1rprj3oo6_250.jpg" width:64px="width:64px" />
<br />
<div class="h8">
Oiii :3</div>
<div class="moddescri">
Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre voce Coisas legais sobre você </div>
</div>

Acho que o código é bem fácil e dar para entender facilmente.

PS: A imagem é diminuída ou aumentada por html, então podem usar qualquer uma. Aqui tem umas bem bonitas.

Espero que tenham gostado do novo layout e do tutorial.

OBS: Domingo não tem posts

14 comentários:

  1. Posso dizer o QUÃO eu adorei esse efeito? ;3 Seguindo e prometo vir aqui frequentemente.

    ResponderExcluir
    Respostas
    1. Ele é realmente muito lindo, obrigada (:

      Excluir
    2. Eu fiquei com vontade de usar, haha. Meu deeeeeeeus!

      Excluir
    3. suhauash, eu me apaixonei por ele (:

      Excluir
  2. O Layout do blog está lindo ! *--*
    O efeito é muuuuito bom ! GAMEI *O*
    Beijos!
    nobodyslistenvei .blogspot

    ResponderExcluir
  3. Amei o layout, bem que eu disse, A Selena iria combinar, né mulherda?! Que bom que meu blog te ajudou, também c:

    ResponderExcluir
  4. Olá! Awwwwwwn, que layout lindo *----* E o efeito também é uma perfeição, fiquei apaixonada por ele <3 Tudo muito fofo <3
    Ótima postagem >.<

    Beijos, Mrs. Nightshade.

    ResponderExcluir
  5. Amei muito esse tudo d+

    http://decididaamudar.blogspot.com.br/

    ResponderExcluir