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'>Em vermelho é o link da imagem, "link" e "nome da página" estão no código com instruções...
<a href='LINK' title='NOME DA PÁGINA'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8fiGyRCYAMBOechK-2DaeLdbhHlgwlh5hHV5UXZE7J8E-z0d5oOfrIbuohDGUEtX8XBHGQ8cBVThMAuccEYB7m2QtU99H2I3UTlDmOx3ucgTFTTfObu1Y6_LjJMm2xiRL6FW5CXjUcwq/s1600/home.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pAW87TA_Nk4JzxyKB5HXbbQRVjTfZS_9MHMXQryYboKkp3lhgASnFeSw1pCSpoMffFxWv_qaOf8AW35tAwBzkcnffV-610F9rQ1K-uByDJ9jKiqTUYYu9_HAO_wgQZBduH44DIttiVuM/s1600/about.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBngfVTpRm6spBTS1AZsUebOt9RgvvGN5HHO5nNnUmnyhXZKE_Q67Zhuh0JhC0R8VOpGDdTZTeKuMKQwZBDm2h0nHrRGrEvES8TYxxJnlzYt58CKxk86tqRSjXs3JeJ3yGKFxmKAe0QgYK/s1600/faq.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDPvs6OmVAAG0wDd2Zjvmiqg2FvepdEQTj1WTEHLfTUQAIa8UU3SLE3jh0PlT929qwnk4IVV-7R9Pm0aYhngC4EhJ1PU_h2b9v8LrK6k8zhqkVyRUYA_NsuJ6oofwrRmXnp136S7hJ0F_/s1600/goodies.png'/></a>
</div>
Agora procure (Ctrl + F) por: ]]></b:skin>
ACIMA dele cole o código a seguir:
/* ----- Menu Beside - By Trashy Girl(Juu) ----- */Vermelho: Flutuando a left(esquerda), poderá tambem mudar para right(direita)
#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}
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!
No prox lay vou tentar fazer esse menu.
ResponderExcluirSó 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
Vou tentar fazer isso no meu blog. Seus post estão ótimos, como sempre.
ResponderExcluirBeijos,
http://deuxvoies.blogspot.com/
Aaai que máximo
ResponderExcluirvou tentar no meu proximo lay conserteza!!
Bjs e obg *-*
www.blogportalteen.blogspot.com
Flor , como vc põe aquela caixa de pesquisa personalizada?
ResponderExcluirPode me responder?
Bjo
http://blogdasgarotasby.blogspot.com
Adorei o tutorial, mesmo! *-*
ResponderExcluirbeijos!
http://a-crossthestreet.blogspot.com/
Ae, enfim fez um coisa que pensei que era difícil! haha'
ResponderExcluirEcleticus
Simplesmente adorei esse tutorial! (^^) De verdade! (^^)
ResponderExcluirhttp://acessopermitidoblog.blogspot.com/
NOSSA, OTIMO tutorial! tava todo mundo querendo saber...
ResponderExcluirbeijos,
www.theattitudeincluded.blogspot.com
Acho mega legal quando vocês ensinam editar html..inteligente d+
ResponderExcluiralt-3.blogspot.com
Amei o tuto ^^ Vou tentar fazer com certeza!
ResponderExcluirBeijos ^^, ah e tem post novo, confere amr?
http://sermenina-blog.blogspot.com
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?
ResponderExcluirBeijos
http://sermenina-blog.blogspot.com
Adorei!Fica super lindo e eu achei que fosse mais dificil!
ResponderExcluirEi flor,to seguindo ok?! Beijos!
ResponderExcluirHaha, 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?
ResponderExcluirhttp://bonecanacaiixa.blogspot.com/
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
ResponderExcluirhttp://bonecanacaiixa.blogspot.com/
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?
ResponderExcluirnã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/
ResponderExcluirAi, que legal! Fiz e adorei. Muito obrigada <3
ResponderExcluirEu amei esse tutorial *-*
ResponderExcluirolha como o meu ficou:
http://miss-independentoriginal.blogspot.com/
Qual codigo eu coloco onde está escrito de azul? *---*
ResponderExcluirPode deixar assim mesmo flor ^^ Beijos
ResponderExcluirhttp://trasshygirl.blogspot.com
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;
ResponderExcluirhttp://sugar-girly.blogspot.com/
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 =)
ResponderExcluirwww.bombadecereja.tk