
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

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.
Porque é que ao mudar de imagem a imagem tem de estar repetida?
ResponderExcluirLegal esse menu, só não vou usar porque gosto muito do que já tenho no meu blog.
ResponderExcluirAbraços!!!
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!!!
ResponderExcluirMuito obrigado pela tua dedicação e compartilhamento! abração,chica
@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.
ResponderExcluirpor isso para usar uma imagem em outro formato teria que alterar o código completo
Tem alguma maneira de fazer a caixa de comentar ficar assim
ResponderExcluir´´ Nome Obrigatorio):
Email(Obrigatorio):
Site/blog (opcional):
Caixa de comentar´´
???
Tem alguma maneira de fazer a caixa de comentar ficar assim
ResponderExcluir´´ Nome (Obrigatorio):
Email(Obrigatorio):
Site/blog (opcional):
Caixa de comentar
Comentar como (Obrigatorio) : ´´
???
Esse blog me ajudou muito, eu visito aqui umas 5 vezes por dia procurando novidades pro meu blog!
ResponderExcluirFabiano, não entendi esta parte:
ResponderExcluirnã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"...
Nossa achei bem legal esse código
ResponderExcluir@Izaque o texto você altera nesta parte
ResponderExcluir< span >Contato< / span >
@Angelo e Qui não tem essa opção no blogger, só se usar comentários de outros sites no blogger, veja os links abaixo:
ResponderExcluirColocar Comentários do IntenseDebate no Blogger
Usar Comentários do Disqus no Blogger - Personalizar Caixa de Comentários
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
ResponderExcluirbeijos e um feliz natal!
oi, fabiano:
ResponderExcluirobrigada 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.
@Silvana não quer dizer que sumiram, mas que é um erro na contagem pode voltar ao normal (contagem certa) a qualquer hora.
ResponderExcluirO 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/
ResponderExcluirO 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@Izaque visitei o site e parece bem simples de usar, mas vou fazer um tutorial sobre ele.
ResponderExcluirFabiano 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@Correia
ResponderExcluirA decima é quando o mouse não está nela, a debaixo quando o mouse encosta na imagem. As de baixo a cor pode mudar
kelvin felipe pega ai meu msn nivelk-kelvin@hotmail.com
ResponderExcluirAmigo 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.
ResponderExcluirMeu Email: Denilson.acre@hotmail.com
@AQUI E O ACRE veja se está configurado para mostrar o numero de postagens ou dias
ResponderExcluiré, fabiano, voltou ao normal no pc do trabalho, mas, no de casa está novamente com a contagem errada.
ResponderExcluirobrigada mais uma vez.
silvana.
Olá ... muito boas as dicas estou sempre que posso a acompanhar seus posts e gosto muito do seu blog... mas quero fazer uma pergunta.
ResponderExcluirPor que seus códigos são tão longos?
@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
ResponderExcluirGreen Button
Blue Button
....
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!
ResponderExcluirvocê deve mudar os links nesta parte final:
ResponderExcluir< a class="about" href="endereço da pagina" >
< span >Sobre< /span >
Queria fazer uma pergunta...
ResponderExcluirComo 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!
@Pedro Rodrigues
ResponderExcluiro 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
Para que serve o serviços e o portfolio?
ResponderExcluirisso seria para quem presta algum tipo de serviço.
ResponderExcluirportifolio seria exemplos de serviços que já fez e o menu serviço poderia ser uma lista de preços
Muito legal esse widget, coloquei no meu blog, mudei algumas imagens, deixei tudo em tom de cinza.
ResponderExcluirVeja: http://gtafiles.blogspot.com/
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?
ResponderExcluirMandem a resposta por e-mail : nynnaa-domingues@hotmail.com
BrunnaDomiingues
ResponderExcluiro texto é nesta parte
< span >Contato< /span >
então só precisa mudar como quiser
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
ResponderExcluiresse código não tem como usar as postagens recentes.
ResponderExcluirmas o blogger tem gadgets de posts recentes ou posts mais visitados
Oi
ResponderExcluirQueria 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!!
veja se é isso que procura: Fazer Menu com Imagens ao lado dos Links
ResponderExcluirOnde tem:
ResponderExcluir"Home" href="endereço da pagina">
pode ser substituído por:
"Home" href="/">
pois "/" significar a pagina raiz, ou seja, o início.
Obrigado
Este comentário foi removido pelo autor.
ResponderExcluirfiz o teste e funciona, mas acho que é mais confiável usar o endereço.
ResponderExcluirOlá Fabiano
ResponderExcluirNa 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?
DTC marcas
ResponderExcluirisso é apenas um menu com links, veja aqui: Como fazer e colocar botões no blog
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
ResponderExcluirlisiterapy.blogspot.com Obrigada
os textos do menu são nesta parte
ResponderExcluir<a class="about" href="endereço da pagina">
<span>Sobre</span>
</a>
veja que tem uma para cada icone do menu
Tem um menu bem legal tambem,se quiserem de uma olhada no meu blog e vejam: hbtemplates.blogspot.com ele é transparente!
ResponderExcluirNão consigo alterar as cores do "background" e das fontes das letras, mesmo trocando o código da letra.
ResponderExcluirdependendo do seu template exitem varios códigos de formatação.
ResponderExcluirpor 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
LEGAL GOSTEI (:
ResponderExcluirExiste 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é possivel inverter, afinal são códigos com base em numeros, mas vai dar trabalho e tem varias chances de erros
ResponderExcluirmas 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
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?
ResponderExcluirRoberto códigos de pop up são um pouco mais complicados e as vezes apresentam falhas dependendo do navegador que a pessoa usa.
ResponderExcluiré melhor criar um pagina extra do blogger e colocar essas informações de contato nela, veja aqui:
Paginas extras para o Blogspot
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
ResponderExcluirpara usar somente o desenho é melhor achar somente a imagem pronta em algum site, pesquise no google por icone home
ResponderExcluirola 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/
ResponderExcluirMuito bom!
ResponderExcluirOlá, 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!
ResponderExcluirOlá, 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!
ResponderExcluirMatheus veja aqui:
ResponderExcluirPersonalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)
Bom dia!
ResponderExcluirAdorei 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
temos códigos para sub menu, mas não deste tipo do tutorial, veja aqui:
ResponderExcluirCriar e Colocar um Menu com SubMenu com CSS no Blog
Fabiano, obrigado pela atenção! Andei pesquisando um pouco de Menus, e acabei curtindo o accordion, famosa sanfona rsrsrs
ResponderExcluirPesquisei 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!
Rodrigo sobre deixar o menu mais bonito isso depende da combinação de cores que usar....
ResponderExcluireu achei interessante esse menu do link que você usou como exemplo, vou fazer alguns testes com ele.
obrigado pela sugestão.
Como colocar esse menu para não se movimentar quando descemos o blog?
ResponderExcluirpoderia colocar o código do menu no lugar dos links, veja aqui um outro exemplo com botões compartilhar
ResponderExcluirBotões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais
mas poderia ser feito com qualquer outro link
poderia alterar as imagens e a cor do fundo??
ResponderExcluirveja no trecho do CSS que aparecem muitas vezes o trecho
ResponderExcluirbackground: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.
Obrigado me ajudou muito
ResponderExcluirMuito bom mesmo parabens!!!
ResponderExcluir