24 de set. de 2012

Menu Heart!

Tumblr_m9z3f5jel81qg5ngpo1_500_large

Olá gente, tudo bom? Hoje (atualizando a tag tutoriais), trouxe um menu lindo para vocês. Para ver o resultado, clique aqui. Ele já é um pouco conhecido aqui na Blogosfera, mais este, tem um efeito diferente. Vamos conferir?

Primeiramente, acesse o HTML do seu blog e procure por: ]]></b:skin>. Quando achar, cole acima desta tag o seguinte código:

.barrinha {
display : block;
padding: 2px;
background: #000;
text-indent : 5px;
color: #fff;
padding-left: 6px;
vertical-align: middle;
margin-bottom: 2px;
-webkit-transition: all 0.80s;
font: 10px "tahoma";
}
.barrinha:hover {
padding-left: 20px;
color: #000;
border-width: 1px;
border-style: left;
box-shadow: inset 600px 0 0px 0 #fff;
-webkit-transition: all 0.80s;
}

Pronto, agora é só modificar, as cores e tudo mais, do jeito que você quiser. Agora, cole o seguinte código aonde você quiser que o menu apareça.

<div class="barrinha">COLOQUE ALGO AQUI</div>

Espero que tenham gostado do tutorial e do menu. Se usarem, avisem e creditem ao blog e ao tumblr Things 4 HTML.

9 comentários:

Thaynará disse...

Eu estava procurando muito esse tuto e nem sabia onde tinha, obrigada Mollie!

Garota Differente

thalita. disse...

Esse menu tem um efeito lindo demais, estava justamente procurando por ele *-* Com certeza vou usar no próximo lay do blog, vou até salvar aqui!
E queria também saber como se faz cabeçalhos, banner e afins desse tipo que você tem aí no cabeçalho, se puder postar um tuto hihi (:

Beijos :3
quinzedilemas.blogspot.com

Larissa & Joana disse...

Legal esse tutu ajuda bastante!
Se me permite divulgar: Está tento o 1 mini-game lá no meu blog, to aprendendo a usar o photoscrape e esse blog tem me ajudado mt, gostaria que participasse! Bjos

Blogofthepaparazzi.blogspot.com

Japona .* disse...

adorei esse tutorial ;)
bem legal o menu! *-*

boa dica, beijinhos :*

Crazy Paródias Together disse...

Aiin, acho lindo o efect *--* Adorei :* Ah, ja sabe da novidade? O Teen Style voltou mas como Sweet Cloud. To muito feliz de voltar :) Queria muuito que vc me ajudasse a reconstrui-lo! ja to seguindo ok? Conto com vc <3

sweetcloud-oficial.blogspot.com/

Anônimo disse...

AWNN ELE É TÃO LINDJO! Eu nunca achei onde fazer ele, sendo que milhares de blogs tem ele. Seguindo aqui :)

Beijos,
Sim Senhorita (Clique no perfil)

Anônimo disse...

é lindo o resultado desse tuto,!já vi em vários blogs! e esse layout hein,tão lindo,adoorei! bjs : *

fabulosa-make-up(.blogspot.com.br) exclua os parenteses..! : )

✖ Gyo ✖ disse...

Lindo o menu, ja tinha colocado lá no blog antes =D Bjs, bjs ;*

Missy Queen Bee disse...

Esse menu é muito fofo, acho que vou usar para a página de Goodies. Se layout tá mto perfeito menina, quero pra mim. Amei o blend Miley :) Já sigo aqui!
Dia 26/9/12 eu criei um blog e eu ficaria bem feliz se você o visitasse e desse sua opinião!
nuvensdeframboesa.blogspot.com