Menu vertical na lateral (Sidebar) do blogger - Blogspot 2

João Santos | 17:06 |





Olá pessoal! Tenho uma excelente sugestão para quem gosta de menu com efeitos e mais ainda para quem gosta de menu na lateral (sidebar) do blogger, onde você poderá postar páginas extras em um só lugar, é muito simples, prático e em apenas "um clique", você terá seu menu com efeitos e com um design moderno  no blogger. Vamos ao que interessa...
Logado ao blogger, vá em Desing ~> Elementos da Página ~> Adicionar um Gadgets HTML/JavaScript, copie e cole todo o código abaixo no Gadgets.


<style type="text/css">
#ddblueblockmenu{
border: 1px solid #FF4500; /*Cor da borda*/
border-bottom-width: 1;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%;
text-decoration: none;
color: #363636; /* Cor da fonte do menu */
background-color: #A9A9A9; /*cor do background */
border-bottom: 1px solid #FF4500; /*Cor da borda do botão */
border-left: 7px solid #363636; /*cor da borda esquerda */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%;
}
#ddblueblockmenu a:hover {
background-color: #B5B5B5; /*Cor do background do menu de baixo*/
border-left-color: #FF4500; /*cor da borda do menu esquerdo*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Cor da fonte do titulo */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #FF4500;  /*cor do background do menu inicial*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Menu Lateral</div>
<ul>
<a href="#">Página Inicial</a>
<a href="#">Seu-titulo01</a>
<a href="#">Seu-titulo02</a>
<a href="#">Seu-titulo03</a>
<a href="#">Seu-titulo04</a>
<a href="#">Seu-titulo05</a>
</ul></div>
O lance é bem simples, nada de preocupação, poste em cada parte do código tudo o que você deve saber, onde tá #, é exatamente onde você vai colocar seu link alterando os determinados nomes, por exemplo, se você for colocar um link de "contato" mude onde está SEU-TITULO para contato e assim com os demais.
Na parte das cores, tá tudo explicado ao lado de cada um entre "/*----*/” ao longo do código. Quando as alterações estiverem todas terminadas salve, veja o Demo
Qualquer dúvida deixe um comentário.

Até a próxima.

Gostou do artigo? Assine via e-mail e receba atualizações do blog imediatas em sua caixa de entrada ou se preferir assine via RSS/Feed. Vira fã no Facebook.

2 Responses So Far:

William disse...

Seu blog possui conteúdo para ajudar e muito à outros companheiros na blogsfera.
Sucesso.
Abraço

João Santos disse...

Obrigado pelo comentário, e no que eu puder ajudar. Conte comigo.

- Comentário Moderados -

Não aceitamos por aqui:

- comentário nada a ver com o artigo.

- Links de propaganda (Spam).

- Link de divulgação de seu Blog/Site.

- Pedido de parcerias.

- Com palavrões e onfensas.

Enfim, é simples coisas desnecessárias serão removida, qualquer dúvida temos uma página de Contato.
Agradeço pela compreensão.

 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS