Esse é um menu bem simples, que não usa script, é todo em CSS. Veja abaixo:
Vá em Layout => Adicionar um Gadget => HTML/JavaScript
<center>
<style>
#button {
width: 12em;
border-right: 1px solid #f39999 ; /* cor da borda esquerda*/
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; /* tipo da fonte */
background-color: #f39999; /* cor de fundo externo*/
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #f39999; /* cor da borda inferior */
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #f8c7c7; /* cor da borda direita */
border-right: 10px solid #f8c7c7; /* cor da borda esquerda */
background-color: #f5adad; /* cor de fundo interno */
color: #000; /*cor da fonte */
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #f8c7c7; /* cor da borda direita com efeito hover */
border-right: 10px solid #f8c7c7; /* cor da borda esquerda com efeito hover */
background-color: #da8989; /* cor de fundo em estado hover */
color: #000; /* cor da fonte em estado hover */
}
</style>
<div id="button">
<ul>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
<li><a href="Endereço do Link">Título</a></li>
</ul>
</div></center>
Tudo que estiver em negrito pode ser substituído.
Coloque a cor que adequar-se melhor ao seu blog.
Tabela de cores AQUI
Onde estiver: "Endereço do Link" , colocar endereço para onde o link deve ser direcionado
Onde estiver: "Título" colocar nome dos Marcadores
***Créditos: Elaine Gaspareto
Nenhum comentário:
Postar um comentário