15 de jan de 2013

Menu Wishlist Box

Olá! Desculpa a demora para postar... Estava ocupada, mas irei tentar postar mais cedo no blog. Enfim, hoje eu trouxe um menu para você usar, nos tutoriais, wishlist, ou outra coisa! O nome é Wishlist Box, e o resultado é esse. Eu aprendi esse tutorial no Tumblr CSS and HTML. Espero que gostem! Quer aprender? Leia mais!

Primeiro entre na sua conta Blogger, vai em Modelo > Editar HTML
Aperte Ctrl + F e procure por:
]]></b:skin>
Quando achar cole o seguinte código ACIMA da tag.

.wish {
color:#fff;
background: #222121;
display : block;
padding:3px;
font-size: 8pt;
font-family: verdana, Lucida Sans Unicode;
line-height: 13px;
text-align:left;
margin-bottom : 2px;
padding-left : 10px;
-webkit-transition-duration: .90s;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.wish:hover {
color:#ffffff;
background :
#b5cb5c ;
padding-left : 30px;
}
É só mudar as cores, quando terminar de personalizar vai em Layout > Adicionar Gadget > HTML/JavaScript, e nele cole:

<div class="wish">Oi aqui um exemplo</div> <div class="wish">Oi aqui um exemplo</div> <div class="wish">Oi aqui um exemplo</div> <div class="wish">Oi aqui um exemplo</div> <div class="wish">Oi aqui um exemplo</div> <div class="wish">Oi aqui um exemplo</div>

Não precisa nem explicar onde você coloca o nome né? Mas Tory eu quero essa wishlist com LINK como faço? Em vez de por o código acima, coloque o abaixo!

<a href="URL DO BLOG"><div class="wish">Oi aqui um exemplo</div></a>
<a href="URL DO BLOG"><div class="wish">Oi aqui um exemplo</div></a>
<a href="URL DO BLOG"><div class="wish">Oi aqui um exemplo</div></a>

Pronto! Qualquer dúvida, comente! 

3 comentários:

  1. Lindo esse menu.

    blog-da-marci.blogspot.com.br

    ResponderExcluir
  2. Muito bonito, adorei o feito hover nele é bem suave.

    ResponderExcluir
  3. OMG isso é muito lindo <3 mas eu amei mesmo é verde eu adoro verde rçrçr ta parei ese efeito é bonito e lecal Ç:

    jovenclube(.blogspot.com.br)

    ResponderExcluir