27/10/2012

Tutorial : Como por um menu vertical no seu blog

Bom gente,hoje irei ensinar como você pode ter um menu igual ao do nosso blog,
gente;é a coisa mais fácil que eu já fiz na vida.Todos os créditos vão para o Cherry
Bomb.Clique em leia mais e aprenda!
Muuuita gente já me pediu, então finalmente vou mostrar como eu coloquei esses menus da sidebar:
 
O código desse menu é do site (mega legal) Coisinhas Mil. Só que quase ninguém entendeu como põe pela explicação que está no site, então vou explicar á minha maneira, que (modéstia a parte) é bem mais fácil.
Vamos lá!

th_seta Abra o blogger, clique em design.
th_seta Clique para adicionar um gadget na sidebar.
th_seta Escolha o gadget de HTML/Javascript.
th_seta Cole no gadget o código abaixo (selecione TODO o código): 
<STYLE type="text/css">
#menuzinho {
display: block;
width: 100%;
height: 19px; /* ALTURA DO MENU /*
width:178px /* LARGURA DO MENU /*
vertical-align: middle;
font-family: Verdana, Arial, sans-serif;
font-size: 10px; /* TAMANHO DA FONTE */
font-weight: bold;
color: #FFB3D7; /* COR DA FONTE */
text-indent: 5px;
line-height: 17px;
margin-bottom: 3px;
margin-left: -1px;
background-color:#FFECF3; /* COR DO FUNDO */
}
#menuzinho:hover {
display: block;
color: #FF80C0; /* COR DA LETRA QUANDO PASSA O MOUSE */
background-color: #FFDFEE; /* COR DO FUNDO QUANDO PASSA O MOUSE */
}
</style>
<a id="menuzinho" href="URLDOLINK">NOME DO LINK DO SEU MENU</a>
Como podem ver, o códgio é auto-explicativo. Fiz algumas mudanças pra ficar mais fácil de personalizar.
th_seta Altere o código das cores como quiser. Para achar o código das cores, você pode ir ao designer de modelo do blogger, e escolher a cor:
image
Ou então veja essa tabela e essa caixinha seletora de cores.

th_seta Sempre que quiser por mais um link no menu, copie essa parte do código(que tá lá no final):
<a id="menuzinho" href="URLDOLINK">NOME DO LINK DO SEU MENU</a> 
E cole logo abaixo. Depois é só substituir o link e o nome do link.
Depois de alterar tudo é só salvar! Espero ter ajudado, Kissus!

                 CHERRY BOMB :)

Nenhum comentário: