07/12/2011

Tutorial: Menu ao lado do post

Não sei se vocês já viram algum blog com um menu ao lado do post, mas é um bom lugar para colocar o menu, além de ficar muito fofo.

Nós já fizemos um layout com esse menu, olha:  http://layout-teste3.blogspot.com/


Mas vamos ao tutorial!


Primeiro vá no painel do blogger e depois "Design > Editar HTML" do seu blog desejado 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='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'>ir<img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
</div>


Em vermelho é o link da imagem, em verde é o link da página e em azul é o nome da página. Lembre-se de editar com as informações corretas.


Você pode aumentar ou diminuir o número de imagens acrescentando ou diminuindo a linha abaixo:

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

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

ACIMA dele cole o código a seguir:

#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


E então, o que acharam do tutorial? Qualquer dúvida deixe um comentário!
E se tiverem alguma ideia de tutorial para eu postar aqui no blog, pode deixar um comentário e, se possível, vou atender a sugestão.

Beijos,
Camy!

19 comentários:

G✩ disse...

Olá, o banner de vcs já está na página de parceiros do meu blog, pode conferir *--* Muito obrigada por aceitar a parceiria

http://out-of-orbit.blogspot.com/

Curiosa disse...

De nada! Obrigada por colocar lá! O seu já está aqui também!

Beijos,
Curiosa!

Simony disse...

Oi te conheci no Blog da Dayane,seguindo,segue de volta..bjs

Simony disse...
Este comentário foi removido pelo autor.
Curiosa disse...

Ok, pode deixar! Vou seguir!

Beijos,
Curiosa!

Karen Guzzatti Konig disse...

Que legal seu blog.
Parabéns!Adorei!!
Ja estou te seguindo.
Da uma passadinha la no meu blog tbm.
Um big beijo, fica com Deus e Xau Xau!!
http://karenbarbiepink.blogspot.com/

Cibele Moreira Machado disse...

Oi linda,
Achei seu link em outro blog, vim fazer uma visitinha e já estou seguindo.Vai lá no meu cantinho, gostando segue.
Bjo

http://sempreglamm.blogspot.com/

! Lyah ! disse...

acc afiliaçao?
ta certo q eu conheçi seu blog agora, mas gostei e comigo é td ja e agora e n depis mais tarde.

Conversando com a lua ღ Facebook do blog

G✩ disse...

Oiie , tem uma tag muito especial pra vocÊ no meu blog :

http://out-of-orbit.blogspot.com/2011/12/tag-fora-de-orbita.html

Curiosa disse...

Karen,
Obrigada! Também adorei o seu blog! Muito lindo, já estou seguindo!

Cibele,
Pode deixar! Vou dar uma passadinha lá, sim!

Lyah,
Claro! Aceito afiliação, sim! =D

G✩,
Own, obrigada! Vou pegar!

Beijos,
Curiosa!

! Lyah ! disse...

Esa: http://i1081.photobucket.com/albums/j350/cherryliah/Goodies%20CB/img-filiados12.png

mas 1 coisa: como vc poe link co comentario do blog?

Sweet Girl disse...

Amei a postagem bem interessante :)
seguindo claro, adoraria ver você em minha lista de seguidores :>
http://praia345.blogspot.com

Stela Schulz Martins disse...

Oii, adorei o tutorial, e o blog também.
Olha aceito afiliação sim fofa e já estou retribuindo seguindo ! Beijos!

http://sweetdreamsoficial.blogspot.com/

Stela Schulz Martins disse...

Antes pega meu link de afiliação em avisa que pedo o seu

Curiosa disse...

Lyah,
Ok, vou colocar na nossa elite!

Sweet Girl,
Obrigada! Eu tentei entrar no seu blog e está dando que o blog não existe! Vou tentar de novo e assim que conseguir eu sigo!

Stela,
Obrigada! Que bom que gostou do tutorial e do blog, e que aceita afiliação! Ok, eu pego e aviso!

Beijos,
Curiosa!

! Lyah ! disse...

ja ta la

Stela Schulz Martins disse...

Pode pegar qualquer imagem para a afiliação , bjos!

Hallana disse...

Adorei o tutorial, vou fazer um layout novo assim que tiver tempo e vou usar as suas dicas e caso tenha dúvidas vou recorrer a você. Curti o blog!! (:

Beijos, webcalcinha.blogspot.com

Curiosa disse...

Lyah,
Ok! Obrigada!

Stela,
Tudo bem! Assim que puder eu coloco aqui!

Hallana,
Tudo bem, pode deixar que eu vou ajudar em tudo que puder! E obrigada!

Beijos,
Camy!

Postar um comentário

Não se esqueça de deixar seu comentário aí embaixo!

Related Posts Plugin for WordPress, Blogger...