8.20.2012

Tutorial - Efeito ''status'' em sombra!


Olá galerinha tudo bom?? É comigo não, ''escola'' isso resume TUDO OKAY?  Emfim esse tutorial é vem simples ele é igual aqui do blog (veja o exemplo CLICA). Emfim esse tuto deixa seu blog mais lindo, e mais moderno ele é SUPER FÁCIL de fazer então não me arranje desculpas hein u.u.

1) Vá na sua página inicial do blogger;
2) Aperte a ''setinha para baixo (EXEMPLO)'' e clique em modelo;
3) Editar HTML;
4) Aperte Ctrl + F (ao mesmo tempo) e abrirá automaticamente uma caixinha de pesquisa;
5) Nela cole: ]]></b:skin>
6) Acima dessa ''tag'' cole:

.heart 
    {background: #eee;
    font-family: trebuchet ms;
    font-size: 11px;
    margin: 1px;
    color: #8a8a8a;
    display: block;
    -moz-box-shadow: inset 3px 0 0px 0 #ff63a6;
    -webkit-box-shadow: inset 3px 0 0px 0 #ff63a6;
    box-shadow: inset 3px 0 0px 0 #ff63a6;
    padding: 3px 3px 3px 6px;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;}
.heart:hover
    {-moz-box-shadow: inset 550px 0 0px 0 #dcf858;
    -webkit-box-shadow: inset 550px 0 0px 0 #dcf858;
    box-shadow: inset 550px 0 0px 0 #dcf858;
    color: #ff3f92;}
.heart
    a{color: #ff3f92;}
.heart
    b{color: #ff3f92;}
*AONDE ESTÁ EM NEGRITO VOCÊ PODE TROCAR! 
7) Pronto salve;
8)Vá em Layout (EXEMPLO);
9) Adicionar elementos de página - HTML/JavaScript;
10) E cole o seguinte código;
<div class="heart"> LALALA AQUUI O TEXTO QUE VOCÊ QUISER!</div>
Para adicionar mais de coloque abaixo  o mesmo código ficando assim:
<div class="heart"> Texto 1</div>
<div class="heart">Texto 2 GC</div>
Fácil né? Então gostou? Sim né u.u, votem muito na enquete hein e até amanhã.

11 comentários:

  1. Nossa Velho, você me salvou. Eu tava procurando esse tuto a décadas, hahaha. Valeu Math ;3

    http://farryteen.blogspot.com/

    ResponderExcluir
  2. Que fofinho! Mas prefiro o meu normal, sei lá, eu sou paranoica com muitas coisas no blog AUHAUAHU dá agonia.
    Beijos,
    Siimsenhorita.tk

    ResponderExcluir
  3. Que legal!! dá uma super diferenciada... valeu!!

    http://help-adolecentro.blogspot.com.br/

    ResponderExcluir
  4. Nossa eu sempre procurei esse tuto
    pode ter certeza que no próximo Lay eu uso ..
    http://extremetutorialsandtips.blogspot.com.br

    ResponderExcluir
  5. Pode sim me chamar de Tory viu? Amei o tutorial, vou ver se coloco no VY


    http://victoryofficial.blogspot.com.br/

    ResponderExcluir
  6. Bem fácil, e fica mega fofo! Ainh que blog mais lindo, vc é super carismática! Vou vir aqui mais vezes! Gostaria de visitar o meu blog, seria uma honra ter vc por lá, e se vc gostar poderia seguir! Ficaria lisonjeada! Ah já estou seguindo!

    ResponderExcluir
  7. Nossa que fácil, e ficar hiper lindo!
    http://onlyadn.blogspot.com.br/

    ResponderExcluir
  8. Legal.
    E eu nem sou viciada em ficar passando o mouse naquele menu ali
    Bjos
    http://jayfereguetti.blogspot.com
    @jayfereguetti

    ResponderExcluir
  9. amei o efeito!tutorial muito útil •_•
    tenha um ótimo dia flor!
    Meu Cantinho Especial

    (a Carol não apareceu para posta eu estou retribuindo a linda visita lá no Só Para as Garotas )

    ResponderExcluir
  10. Já sabia do tutorial, perfects :)

    Seguiindo

    Beijos da ♥ Bibi ~ Chan ♥

    #Nhaac -> http://blog-pinkberry-oficial.blogspot.com/

    ResponderExcluir
  11. xoxo adorei o tuto vou usar no próximo lay
    Kissus!
    Pequena Garota

    ResponderExcluir

É o seguinte...
x Comente se você REALMENTE leu o post;
x NUNCA PEÇA para eu seguir deu blog de volta eu sempre visito, e seu eu gostar com certeza irei seguir;
x As tags são respondidas em um ''post'' privado geralmente anexadas em um servidor;
x Repeito os outros e eu, se quiser criticar critique!
Até e obrigado pela visita XOXO :)