• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

6 de janeiro de 2012

Menu ao lado do post


Eu amei esse tutorial bom eu ja sabia fazer mas era uma maneira mais complica eu achava srsrs entao axei esse tuto super facil e vou passar pra vocês ^^

use a criatividade...  Nada de copiar hein.


Vá no html do seu blog e procure(Ctrl + F) por: <div class='column-center-outer'>


ABAIXO dele, cole o código a seguir:
<div id='pag'>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-9BnhK42dt7s/Tk_Sto_i9fI/AAAAAAAAAcA/2LRyqaZpHbQ/s1600/home.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-dldAfv4m0YE/Tk_SuNTcOvI/AAAAAAAAAcE/6HxQRmVoJ_I/s1600/about.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-5UIETcBekms/Tk_Ss00yaII/AAAAAAAAAb4/7mzxwNVPDgc/s1600/faq.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-4IckqUJlnsE/Tk_StUVVlrI/AAAAAAAAAb8/xCvTD47LqAM/s1600/goodies.png'/></a>
</div>
Em vermelho é o link da imagem, "link" e "nome da página" estão no código com instruções...

Agora procure (Ctrl + F) por: ]]></b:skin>

ACIMA dele cole o código a seguir:
/* ----- Menu Beside - By Trashy Girl(Juu) ----- */

#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}
Vermelho: Flutuando a left(esquerda), poderá tambem mudar para right(direita)
Laranja: Largura total do menu, poderá mudar de acordo com seu gosto
Amarelo: Largura total da sua imagem
Verde: Altura total da imagem

créditos:trasshygirl

0 comentários:

Deixe seu comentário:

Related Posts Plugin for WordPress, Blogger...