clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

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:

Antes de sair, não esqueça de comentar!