dicas blog
Home » , , » Como adicionar no blogger um menu lateral

Como adicionar no blogger um menu lateral

0
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  que    postei  aqui   no blogger  e que  uso  ele  algumas  partes do  meu blog  bom  deixa de  papo  e   vamos  ao  tutorial abaixo.

demo abaixo


Primeiro    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>

Tutorial Atualizado:código na caixinha abaixo para copiar!


Agora vamos  as   alterações   de  um CTRL+F e procure  pelos  seguintes  trechos  em vermelho  e  adicione  seus textos,  e  em laranja  links  destinos .

Para  alterar   a cor procure por #39F e altere a cor do efeito hover  azul nos  locais  marcados pela  cor  que  preferir. são 6 vezes:
 
Bom erra  isso  duvidas é    perguntar   até  a  próxima.

0 comentários:

Postar um comentário