21/09/2012

Tutorial: Menu ao lado dos post

||

Yo!!! Já viram algum blog com um menu ao lado do post, vou mostrar como fazer isso agora! E ai vamos tentar?  E muito fácil e rapidinho. Os créditos são do blog Curiosa.


Em seu HTML procure pelo código abaixo:

<div class='column-center-outer'>

E abaixo adicione isso:

<div id='pag'>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
</div>


Em roxo:  E onde você coloca o URL da pagina
Em vermelho: E o nome da página tipo "Home"
Em azul: E onde você coloca o URL da imagem

Agora procure pela tag: ]]></b:skin>

E acima dele você adiciona esse código:

#pag{
float: left;
margin:0 -109px;
width:120px;
}
#pag a{
padding:5px 0;
display:block;
width:114px;
height:47px;
}
#pag a:hover{
EFEITO QUE VOCÊ QUER USAR QUANDO PASSAR O MOUSE NA IMAGEM}

Em verde: A direção do seu menu mude para  left (esquerda) ou  right (direita)
Em Laranja: Largura do menu
Em vinho: Largura total da sua imagem
Em dorado sujo: Altura total da imagem

Então gostaram? Espero que sim, não esqueçam de comentar e se tiverem algum pedido ou sugestão sera um prazer ajudar.

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram