Tutorial: Menu simples para Marcadores

Olá pessoinhas lindas, tudo bem? Sou a Hina Prado do Blog Aishiteru em Contos, e sou a nova colaboradora do blog. Eu irei postar principalmente sobre dicas para blogueiros e tutoriais para vocês deixarem os vossos blogs ainda mais lindos. Nas horas vagas faço layout, alias o novo layout do blog foi feito por espero que tenha gostado pois me deu muito trabalho rsrs

Mas chega de falar sobre mim. Hoje no meu primeiro post, vou ensinar a vocês como colocar um menu de marcadores simples no qual vocês podem personalizar, ele funciona em todos os layout e se ajusta automaticamente a largura da sua gadget/coluna lateral.

Esse é o menu de marcadores de um layout free que eu fiz. A segunda imagem mostra o efeito que fica quando se coloca o rato em cima de um nos links.

Como instalar :

• Primeiro, vai ao painel de controle do blog e clique no nome do seu blog.
• Depois clique em layout que fica no menu do blog
• Clique em em adicionar gadget
• Procure por Html/java Script e cole dentro do mesmo o código do menu e clique em salva.

Código:

<style>
.direita { float:right; width:49%; text-align:justify; }

.esquerda { float:left; width:49%; text-align:justify; }

#menutags20{

background-color: #433f3d; COR DO MENU

width: 98%;

height: 11px; LARGURA

float: left;

font: 10px arial; TAMANHO DA FONTE DE LETRA

color: #C1C3B6; COR DA LETRA

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 4px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

#menutags20:hover{

background-color: #C1C3B6; COR DO MENU COM O RATO EM CIMA

width: 98%;

height: 11px; LARGURA

float: left;

font: 10px arial; TAMANHO DA FONTE DE LETRA

color: #433f3d; COR DA LETRA

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 4px;

}

 </style>

<div class="esquerda">

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

</div>

<div class="direita">

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

<a href="LINK" id="menutags20">NOME</a>

</div>

Nota: Não se esqueçam de apagar o que estar escrito em lilás se não o código fica com erro.