Como adicionar um menu lateral no blogger

Nesse tutorial vou mostrar como adicionar no blog um menu lateral para blogger e blogspot. Ter um menu lateral pode ser uma boa opção para ganhar espaço e destacar alguns links no seu blog, como principais categorias ou links de parceiros.

Esse menu é de fácil instalação tendo apenas que usar um gadget javascript e você pode personalizar para deixar combinado com seu blog se preferir.

Esse menu tem um efeito bem legal parecido com o efeito neon.

 

Bom vamos ao tutorial .
Primeiro vá em layout e adicione um gadget JavaScript e adicione o código abaixo dentro dela.


<style> .MBDmenulp{ font: bold 14px Germand; width: 190px; } .MBDmenulp ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .MBDmenulp ul li{ margin:0; padding:0; } .MBDmenulp ul li a{ display:block; text-transform: uppercase; color: #494949; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; -moz-box-shadow: inset 7px 0 10px #CF6; /*cor no estado normal*/ -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .MBDmenulp ul li a:hover, .MBDmenulp ul li a.selected{ color: black; -moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); -webkit-box-shadow: inset 7px 0 10px #39F, inset 0 0 15px #39F, inset 0 0 20px #39F; box-shadow: inset 7px 0 10px #39F, inset 0 0 15px #39F, inset 0 0 20px #39F; } </style> <div class="MBDmenulp"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Categoria</a></li> <li><a href="#">Download</a></li> <li><a href="#">Contato</a></li> <li><a href="http://www.meublogdicas.com.br/">blogger</a></li> </ul> </div>


VEJA O EXEMPLO:

• Home
• Tutorial
• Categoria
• Download
• Contato
• blogger