16/12/2011

Como Fazer um Menu Vertical Fixo no Blogger

Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes. Caso esteja procurando um menu com links lado a lado veja como fazer um menu horizontal.

menu expansivel no blog

O código é muito simples de colocar no blog você só precisa entrar na pagina layout, adicionar gadget, escolher a opção HTML/javascript e colar o seguinte código:
<style type="text/css">
/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */
</style>
<div style='position: fixed; top: 40%; left: 10px;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="endereço da pagina">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="endereço da pagina">
<span>Sobre</span>
</a>
</li>
<li>
<a class="services" href="endereço da pagina">
<span>Serviços</span>
</a>
</li>
<li>
<a class="portfolio" href="endereço da pagina">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="endereço da pagina">
<span>Contato</span>
</a>
</li>
</ul>
</div><a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>


Você apenas precisa trocar os links e texto do menu, mas cuidado, por exemplo, no trecho: <a class="contact" href="endereço da pagina">
<span>Contato</span> a parte class="contact" é o estilo CSS e você não deve mexer nele. O que podemos alterar é o texto Contato que aparece no final: <span>Contato</span>

Caso o menu fica muito perto da lateral da pagina você pode aumentar a margem mudando o valor 10 nesta linha:<div style='position: fixed; top: 40%; left: 10px;'/>

Para usar outras imagens você precisará fazer uma imagem igual a essa logo abaixo e neste mesmo tamanho 190×78 pixels e posicionando os ícones da mesma forma. A razão do tamanho exato da imagem é o mesmo que falamos em outro tutorial sobre: Colocar o Pássaro do Twitter(ou Qualquer Imagem) Voando no Blog
icones do menu

Seria possível usar imagens de outros tamanhos, mas seria necessário alterar o código CSS totalmente fazendo o posicionamento correto da imagem que fundo.

Esse código foi publicado pelo site Spice Up Your Blog (A Stylish Css3 Fixed Position Vertical Side Menu For Blogger) e achamos bem interessante por isso resolvemos publicar também apenas fazendo algumas alterações e sugestões de personalização.
Related Posts with Thumbnails

69 comentários:

  1. Porque é que ao mudar de imagem a imagem tem de estar repetida?

    ResponderExcluir
  2. Legal esse menu, só não vou usar porque gosto muito do que já tenho no meu blog.

    Abraços!!!

    ResponderExcluir
  3. Fabiano, passei agora pra te desejar um lindo e muito feliz Natal e que em 2012 tenhas sempre muitas dicas pra nos dar e isso é tri legal!!!

    Muito obrigado pela tua dedicação e compartilhamento! abração,chica

    ResponderExcluir
  4. @Correia quando visualizamos o menu ele parece ter varias imagens mas na verdade é apenas uma e no código você pode achar varias vezes isso aqui: background-position que faz o posicionamento da imagem.

    por isso para usar uma imagem em outro formato teria que alterar o código completo

    ResponderExcluir
  5. Tem alguma maneira de fazer a caixa de comentar ficar assim

    ´´ Nome Obrigatorio):
    Email(Obrigatorio):
    Site/blog (opcional):


    Caixa de comentar´´

    ???

    ResponderExcluir
  6. Tem alguma maneira de fazer a caixa de comentar ficar assim

    ´´ Nome (Obrigatorio):
    Email(Obrigatorio):
    Site/blog (opcional):


    Caixa de comentar

    Comentar como (Obrigatorio) : ´´

    ???

    ResponderExcluir
  7. Esse blog me ajudou muito, eu visito aqui umas 5 vezes por dia procurando novidades pro meu blog!

    ResponderExcluir
  8. Fabiano, não entendi esta parte:
    não poder alterar o contact...

    então eu não posso personalizar o menu?
    Por exemplo não quero pôr o contato, mas sim "Disco Virtual" e direcionar para a página deste "disco"...

    ResponderExcluir
  9. Nossa achei bem legal esse código

    ResponderExcluir
  10. @Izaque o texto você altera nesta parte

    < span >Contato< / span >

    ResponderExcluir
  11. Adoreii!Vou tentar fazer.Ah!nao sei se é so comigo que ta acontecendo isso,nao ta aparecendo o botao de postagem mais antiga aqui no seu blog.Sumiu
    beijos e um feliz natal!

    ResponderExcluir
  12. oi, fabiano:
    obrigada por responder.
    vc comentou sobre os perfis q desaparecem:
    "Silvana muita gente está reclamando disso, mas não tem como arrumar porque são códigos e contagem do proprio gadget"
    isso significa q os seguidores sumiram?
    silvana.

    ResponderExcluir
  13. @Silvana não quer dizer que sumiram, mas que é um erro na contagem pode voltar ao normal (contagem certa) a qualquer hora.

    ResponderExcluir
  14. O Fabiano eu vi a parte que você pediu para alterar e consegui veja entra no meu blog e olha o menu e as alterações que eu fiz http://helogames.blogspot.com/

    ResponderExcluir
  15. O Fabiano mas uma coisa faça um tutorial falando como colocar menus personalizados no blog veja esse site que disponbliza isso http://www.flashvortex.com/menus.php

    ResponderExcluir
  16. @Izaque visitei o site e parece bem simples de usar, mas vou fazer um tutorial sobre ele.

    ResponderExcluir
  17. Fabiano sou eu o Izaque novamente descobri uma coisa bem legal não sei se você já sabia é um site que avalia o preço de sites e blogs apenas colocando a url olhe eu coloquei o seu site e o valor dele é R$67.256,62 * muita grana né olha aqui o site que calcula http://bizinformacao.com.br/

    ResponderExcluir
  18. @Correia

    A decima é quando o mouse não está nela, a debaixo quando o mouse encosta na imagem. As de baixo a cor pode mudar

    ResponderExcluir
  19. kelvin felipe pega ai meu msn nivelk-kelvin@hotmail.com

    ResponderExcluir
  20. Amigo estou com um problemas,minhas postagens não aparece todas na página principal veja o link http://aquieoacre.blogspot.com/ e estar configurado para aparecer 7 postagem,no entanto só aparece 5.Me ajude.Obrigado.
    Meu Email: Denilson.acre@hotmail.com

    ResponderExcluir
  21. @AQUI E O ACRE veja se está configurado para mostrar o numero de postagens ou dias

    ResponderExcluir
  22. é, fabiano, voltou ao normal no pc do trabalho, mas, no de casa está novamente com a contagem errada.
    obrigada mais uma vez.
    silvana.

    ResponderExcluir
  23. Olá ... muito boas as dicas estou sempre que posso a acompanhar seus posts e gosto muito do seu blog... mas quero fazer uma pergunta.
    Por que seus códigos são tão longos?

    ResponderExcluir
  24. @Daniel são os estilos CSS que são complicados para esse menu por isso ficou tão longo, além disso veja que o trecho se repete para cada botão

    Green Button
    Blue Button
    ....

    ResponderExcluir
  25. Eu gostei bastante mais nao sei como mudar o link do menu e texto, pra quando clicar la e ir onde eu quero.. mais n sei fazer. me ajuda!

    ResponderExcluir
  26. você deve mudar os links nesta parte final:

    < a class="about" href="endereço da pagina" >
    < span >Sobre< /span >

    ResponderExcluir
  27. Queria fazer uma pergunta...

    Como se faz o efeito desse blog no banner ao passar o cursor ?

    http://www.fuckyeaworld.com

    Email: pedro5552010@hotmail.com

    Já procurei em todos os lugares, então decidi vir pedir uma ajuda pro blog que sempre me ajudou. Até mais!

    ResponderExcluir
  28. @Pedro Rodrigues

    o efeito é feito assim:

    .parceiros img{
    -webkit-box-shadow: 0px 0px 0px black;
    -moz-box-shadow: 0px 0px 0px black;
    -o-box-shadow: 0px 0px 0px black;
    position: relative;
    border: 0px solid black;
    top: 0px;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }
    .parceiros img:hover {
    -webkit-box-shadow: 3px 3px 5px black;
    -moz-box-shadow: 3px 3px 5px black;
    -o-box-shadow: 3px 3px 5px black;
    position: relative;
    top: -5px;
    border: 0px solid black;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }

    mas no internet explorer não fica tão bom pois não aparece a sombra na imagem

    ResponderExcluir
  29. Para que serve o serviços e o portfolio?

    ResponderExcluir
  30. isso seria para quem presta algum tipo de serviço.

    portifolio seria exemplos de serviços que já fez e o menu serviço poderia ser uma lista de preços

    ResponderExcluir
  31. Muito legal esse widget, coloquei no meu blog, mudei algumas imagens, deixei tudo em tom de cinza.
    Veja: http://gtafiles.blogspot.com/

    ResponderExcluir
  32. Oi, eu achei muito legal dessa postagem , mas eu queria saber como eu faço pra escrever neles. Um exemplo : quando eu clicar no CONTATO e abrir está escrito alguma coisa , como faço?
    Mandem a resposta por e-mail : nynnaa-domingues@hotmail.com

    ResponderExcluir
  33. BrunnaDomiingues
    o texto é nesta parte

    < span >Contato< /span >

    então só precisa mudar como quiser

    ResponderExcluir
  34. Adorei esse menu, vou tentar colocar em meu blog mas como faço para fazer um menu vertical de postagens mais recentes ?, quero colocar assim no meu blog

    ResponderExcluir
  35. esse código não tem como usar as postagens recentes.

    mas o blogger tem gadgets de posts recentes ou posts mais visitados

    ResponderExcluir
  36. Oi
    Queria que você ensinasse a criar um menu dentro de uma página simples... vi isso num site e achei super legal... o site é esse aqui http://www.celebrita.com.br/
    de acordo que vc clica no meu do topo, aparecerá novos menus dentro da página.

    vlw!!

    ResponderExcluir
  37. Onde tem:
    "Home" href="endereço da pagina">

    pode ser substituído por:
    "Home" href="/">

    pois "/" significar a pagina raiz, ou seja, o início.
    Obrigado

    ResponderExcluir
  38. Este comentário foi removido pelo autor.

    ResponderExcluir
  39. fiz o teste e funciona, mas acho que é mais confiável usar o endereço.

    ResponderExcluir
  40. Olá Fabiano

    Na verdade preciso de um destes porém não tão empetecado ... queria um tipo que tem no "Acompanhe nossas dicas" ao lado do blog.

    Como que faz?

    ResponderExcluir
  41. olá Fabiano gostei muito do seu blog e todas essas dicas sou nova por aqui e não consigo digitar os textos no menu estão todos vazios, já tentei fazer várias vezes e não dá certo se puder me ajudar. MEu blog todo desorganizado
    lisiterapy.blogspot.com Obrigada

    ResponderExcluir
  42. os textos do menu são nesta parte

    <a class="about" href="endereço da pagina">

    <span>Sobre</span>

    </a>


    veja que tem uma para cada icone do menu

    ResponderExcluir
  43. Tem um menu bem legal tambem,se quiserem de uma olhada no meu blog e vejam: hbtemplates.blogspot.com ele é transparente!

    ResponderExcluir
  44. Não consigo alterar as cores do "background" e das fontes das letras, mesmo trocando o código da letra.

    ResponderExcluir
  45. dependendo do seu template exitem varios códigos de formatação.

    por exemplo se tiver
    body{font-size:14pt}
    .post {font-size:16pt}

    mesmo que altere o 14 px não vai mudar o tamanho da fonte das postagens por causa do estilo .post

    ResponderExcluir
  46. Existe a possibilidade colocar o menu sem se movimentar quando descemos na pagina? E de colocar do lado direito, em vez do lado esquerdo como esta?

    ResponderExcluir
  47. é possivel inverter, afinal são códigos com base em numeros, mas vai dar trabalho e tem varias chances de erros

    mas se trocar os valores na linha
    navigationMenu .portfolio:hover{ background-position:-114px -39px;}

    deve funciona, mas existem diversas linhas deste tipo no código então precisa alterar todas.

    para fazer esse tipo de ajuste vai precisar de paciencia e conhecer um pouco de CSS

    ResponderExcluir
  48. Ola Fabiano. Gostei muito da idéia e estou montando meu blog. A minha dúvida é como criar páginas no próprio blog. Por exemplo: no link "Contato" gostaria de clicar e abrir uma nova janela ou pop-up com meus telefones e endereço. Como faço isso? Onde crio esse link?

    ResponderExcluir
  49. Roberto códigos de pop up são um pouco mais complicados e as vezes apresentam falhas dependendo do navegador que a pessoa usa.

    é melhor criar um pagina extra do blogger e colocar essas informações de contato nela, veja aqui:
    Paginas extras para o Blogspot

    ResponderExcluir
  50. ola queria um menu desse com o desenho so do home como faço essa alteração pois qnd mudo aqui fica tudo verde eu queria colorido

    ResponderExcluir
  51. para usar somente o desenho é melhor achar somente a imagem pronta em algum site, pesquise no google por icone home

    ResponderExcluir
  52. ola gostei muito do blog , quero saber como faço um menu igual ao do link do lado se alguem poder mim ajudar agradeço muito http://narutoshippuudenarena.blogspot.com.br/

    ResponderExcluir
  53. Olá, quando eu entro no home dos blogs as postagens sempre tem "Veja mais", ou no caso do seu blog, "Veja o tutorial completo", eu quero saber como faz isso, pois eu ocupo muito espaço na home do meu blog!

    ResponderExcluir
  54. Olá, quando eu entro no home dos blogs as postagens sempre tem "Veja mais", ou no caso do seu blog, "Veja o tutorial completo", eu quero saber como faz isso, pois eu ocupo muito espaço na home do meu blog!

    ResponderExcluir
  55. Bom dia!
    Adorei o código desse Menu! Eh simples bonito e bem estiloso!
    Porem unico problema que achei é que da pra fazer apenas 1 sub-categorias.... Existe um código parecido com esse onde o MENU pode haver sub-categorias com links? Entendeu?! OBRIGADO ;D

    ResponderExcluir
  56. Fabiano, obrigado pela atenção! Andei pesquisando um pouco de Menus, e acabei curtindo o accordion, famosa sanfona rsrsrs

    Pesquisei no google menus deste tipo, e vi uma página boa, com um CSS bonito e sem erros!

    - http://www.windroidclub.com/2013/06/add-accordion-menu-widget-to-blogger.html

    Vi que aqui no dicasparablogs há um post explicando fazer um, porem testei e achei um pouco "feinho". Uma sugestão minha seria fazer um novo post se baseando neste que mencionei acima ;)

    Até fabiano, tudo de bom!

    ResponderExcluir
  57. Rodrigo sobre deixar o menu mais bonito isso depende da combinação de cores que usar....

    eu achei interessante esse menu do link que você usou como exemplo, vou fazer alguns testes com ele.

    obrigado pela sugestão.

    ResponderExcluir
  58. Como colocar esse menu para não se movimentar quando descemos o blog?

    ResponderExcluir
  59. poderia colocar o código do menu no lugar dos links, veja aqui um outro exemplo com botões compartilhar

    Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

    mas poderia ser feito com qualquer outro link

    ResponderExcluir
  60. poderia alterar as imagens e a cor do fundo??

    ResponderExcluir
  61. veja no trecho do CSS que aparecem muitas vezes o trecho

    background:url....isso é uma imagem de fundo

    background-color ...... é cor de fundo

    então só precisa alterar os códigos, mas salve uma cópia antes assim caso tenha algum problema (errar algo no código e não achar como desfazer) poderá usar sua cópia salva.

    ResponderExcluir
  62. Obrigado me ajudou muito

    ResponderExcluir