13 abril 2013

Pagina de Goodies Cute com Gif




Todo blog que faz tutoriais precisa de um menu bem bonito de goodies não acha ? Por isso fiz este tutorial para ajudar todos os blogueiros e blogueiras que ainda não aprenderam a fazer isto e o menu tem efeito Hover. O resultado fica lindo e você pode alterá-lo e deixa-lo como quiser. Mãos a obra ?

-Preview-

Coloque este código acima de ]]></b:skin>
/*** Menu de goodies HNW***/
.goodies {
display: block;
font-size: 8pt;
font-family: verdana;
line-height: 15px;
border-bottom : 1px solid #f4f4f3;
text-indent: 5px;
vertical-align: middle;
background: url('http://i339.photobucket.com/albums/n464/herycka20/mc08.gif') no-repeat left;
padding-left: 10px;
padding-bottom: 2px;
}
.goodies:hover {
display: block;
border-bottom: 1px dashed #E0DCD6; /*** cor da borda de baixo ***/
vertical-align: middle;
padding-left: 10px;
padding-bottom: 2px;
background: #ebebeb url('http://i339.photobucket.com/albums/n464/herycka20/mc09.gif') no-repeat left; /*** Altere a cor de fundo quando passa o mouse se quiser ***/
}
Essa parte não precisa ser modificada, caso queira trocar o Gif que fica na frente de cada link é só colocar no lugar onde está em itálico.
Neste Link (www) vocês pode encontrar outros gifs para atualizar esse espaço e deixa-lo a sua cara !

Vá na postagem de goodies e clicar em HTML e cole isso:

<div style="float: left; width: 49%;">
<div class="goodies">
<a href="URL_AQUI">TÍTULO 1</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 2</a> </div>
</div>
<div style="float: right; width: 49%;">
<div class="goodies">
<a href="URL_AQUI">TÍTULO 1</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 2</a> </div>
</div>
Agora atualize os espacos onde é pedido o Url e o Título e pronto!


3 comentários:

  1. É lindooo. Adoreei <3

    http://alittlemorethangloss.blogspot.com.br/
    @Caaroolineee :)

    Beijãão :)

    ResponderExcluir
  2. MUITO OBRIGADA VOCÊ É MINHA HEROINA KKK XD

    ResponderExcluir