Menu ao lado do post


Oii genteeein, ao longo do tempo que eu estou com esse lay todos me perguntam como fazer esse menu que tem ali do lado esquerdo da sua tela, e hoje eu vou ensinar mais ou menos como faze-lo. Mas 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

E é só isso, bem fácil né? Se usar me convide pra ver o resultado ok? Vou amar saber que você usou... Beijos!

Comente usando seu facebook!


Comente!

  1. No prox lay vou tentar fazer esse menu.
    Só não faço agora porque eu mudei o layout a pouco tempo e o menu se encontra no cabeçalho.
    Mas eu acho lindo o menu! E com certeza no prox lay irei utilizá-lo!
    bjs
    charmofpink.blogspot.com

    ResponderExcluir
  2. Vou tentar fazer isso no meu blog. Seus post estão ótimos, como sempre.

    Beijos,
    http://deuxvoies.blogspot.com/

    ResponderExcluir
  3. Aaai que máximo
    vou tentar no meu proximo lay conserteza!!

    Bjs e obg *-*
    www.blogportalteen.blogspot.com

    ResponderExcluir
  4. Flor , como vc põe aquela caixa de pesquisa personalizada?
    Pode me responder?
    Bjo

    http://blogdasgarotasby.blogspot.com

    ResponderExcluir
  5. Adorei o tutorial, mesmo! *-*
    beijos!

    http://a-crossthestreet.blogspot.com/

    ResponderExcluir
  6. Ae, enfim fez um coisa que pensei que era difícil! haha'

    Ecleticus

    ResponderExcluir
  7. Simplesmente adorei esse tutorial! (^^) De verdade! (^^)

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  8. NOSSA, OTIMO tutorial! tava todo mundo querendo saber...
    beijos,
    www.theattitudeincluded.blogspot.com

    ResponderExcluir
  9. Acho mega legal quando vocês ensinam editar html..inteligente d+
    alt-3.blogspot.com

    ResponderExcluir
  10. Amei o tuto ^^ Vou tentar fazer com certeza!

    Beijos ^^, ah e tem post novo, confere amr?
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  11. Ah, fofa, ensina como personalizar a caixa de busca como a embaixo do seu perfil,e como colocar essa opção de fundo de blogs?

    Beijos
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  12. Adorei!Fica super lindo e eu achei que fosse mais dificil!

    ResponderExcluir
  13. Ei flor,to seguindo ok?! Beijos!

    ResponderExcluir
  14. Haha, obrigada por seguir e curtir, tbm já tô seguindo e curtir seu blog. Adorei o tutorial, nunca pensei que fosse assim tõ fácil :D Aceita afiliação?
    http://bonecanacaiixa.blogspot.com/

    ResponderExcluir
  15. Eu aqui de novo! Desculpa, não vi seu pedido de afiliação antes... enfim, aceito sim. Coloca meu link e avisa lá no blog :D
    http://bonecanacaiixa.blogspot.com/

    ResponderExcluir
  16. Oi linda o tutorial é muito bom, eu ate peguei ele para usar no mu blog. estou reformando,so que o menu nao ficou do lado ficou em cima da area do post. vc save o porque pode me judar?

    ResponderExcluir
  17. não é nada,é normal a gente pensar algumas coisas , hoje em dia,porque o blogger esta cada vez mais 'plagiador'gosto muito do teu blog e não vou ficar mal por isso , eu pensava que o tutorial era assim : duas barras laterais , uma em cada lado , e uma transparente , nela , só as imagens e com aquele tutorial de trocar imagem quando o mouse passa,por isso ficava maior haha , errei , valeu pelo tuto http://fashionscream.blogspot.com/

    ResponderExcluir
  18. Ai, que legal! Fiz e adorei. Muito obrigada <3

    ResponderExcluir
  19. Eu amei esse tutorial *-*
    olha como o meu ficou:
    http://miss-independentoriginal.blogspot.com/

    ResponderExcluir
  20. Qual codigo eu coloco onde está escrito de azul? *---*

    ResponderExcluir
  21. Pode deixar assim mesmo flor ^^ Beijos

    http://trasshygirl.blogspot.com

    ResponderExcluir
  22. Ain adorey *--*,ja to tentando por no meu proximo lay!Mais tem uma pergunta que não cala na minha cabeça: como assim ''efeito''?Eu ja tentei colocar varios,mais tipo,é aquele que tem que por o url da imagem,pode me ajudar?Eu queria tipo um efeito hover no menu D;

    http://sugar-girly.blogspot.com/

    ResponderExcluir
  23. Oi, desculpa não ter comentado antes, estava com pressa para terminar o lay, e ainda estou ajeitando alguns detalhes do blog, por isso não coloquei os créditos. Mas já coloquei seu blog na pág de créditos =)

    www.bombadecereja.tk

    ResponderExcluir