1 de fev de 2013

Barrinha de Status - Menu Wishlist


 Perguntaram como é que se coloca aquele efeito no Status do Blog.
 É um menu cujo tutorial vi no Kawaii World.
 Se seguir conforme as instruções dá certo, fica lindo e é prático.


Vá ao seu layout > Modelo > Editar HTML.
Dê Ctrl + F e procure por:
Cole o seguinte código antes:



.midnight{background: #dfdbdb;font-family: trebuchet ms;font-size: 11px;margin: 2px;color: #000;display: block;-moz-box-shadow: inset 4px 0 0px 0 #a09aa3;-webkit-box-shadow: inset 3px 0 0px 0 #fe79ab;box-shadow: inset 3px 0 0px 0 #ee79b6;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;}.midnight:hover{-moz-box-shadow: inset 550px 0 0px 0 #d5e0c6;-webkit-box-shadow: inset 550px 0 0px 0 #f192ba;box-shadow: inset 550px 0 0px 0 #d5e0c6;color: #818181;}



Sobre o código:

background: #dfdbdb; - Cor do seu fundo inicial.
font-family: trebuchet ms; - Fonte.
font-size: 11px; - Tamanho da fonte.
margin: 2px; - Espaço entre cada linha do menu. 
color: #000; - Cor da fonte.
box-shadow: inset 3px 0 0px 0 #ee79b6; - Cor da linha quando menor.
E o resto você vê quando for trocando.

Para usar o código vá em HTML/ JavaScript e cole:

<div class="midnight"> Seu texto </div>

7 comentários:

  1. Oi minha lindinha. Aqui como sempre, super kawaii *-*
    Então..eu mudei o layout do meu blog, da uma passadinha lá e deixe um comentário dizendo o que achou do novo lay :3 aproveita e vote nas enquetes ;3 e se puder ajudar na divulgação fico muito agradecida *00*

    http://reinadodasotomeskawaiis.blogspot.com.br/

    xoxo~

    ResponderExcluir
    Respostas
    1. Yoo Hay-chan \o/
      Valeu!!! Estou indo fazer isso agora mesmo kkskoskoskoask (ataque epilético no teclado)

      Excluir
  2. sugoiii >.< amei o tuto me ajudou e muito ^^

    ResponderExcluir
  3. Oh arigatou Erica Ca,tava tentando achar já faz muuito tempo!!!

    ResponderExcluir
    Respostas
    1. \o/ De nad Natsume-chan!
      É, as pessoas estavam escrevendo bastante porque queriam esse menu, aí eu fiz o tutô e-e

      Excluir
  4. Oh arigatou Erica Ca,tava tentando achar já faz muuito tempo!!!

    ResponderExcluir

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão