No Tutorial de hoje, vamos aprender a fazer um menu vertical,
como esse da imagem abaixo, que é bem bacana para você usar no seu blog.
No Painel de seu blog, Vá em LAYOUT, ADICIONAR UM GADGET, HTML/JAVASCRIPT.
Cole o código abaixo. Note que destaquei no código algumas áreas que você poderá alterar a seu gosto.
<STYLE type="text/css">
#menuzinho {
display: block;
width: 100%;
height: 19px; /* NESSA AREA VOCÊ VAI CONFIGURAR A ALTURA DO MENU /*
width:178px /* NESSA AREA VOCÊ VAI CONFIGURAR A LARGURA DO MENU /*
vertical-align: middle;
font-family: Verdana, Arial, sans-serif;
font-size: 10px; /* NESSA AREA VOCÊ VAI CONFIGURAR O TAMANHO DA FONTE */
font-weight: bold;
color: #fb67ad; /* COR DA FONTE */
text-indent: 5px;
line-height: 17px;
margin-bottom: 3px;
margin-left: -1px;
background-color:#ffffff; /* COR DO FUNDO */
}
#menuzinho:hover {
display: block;
color: #fe94f0; /* NESSA AREA VOCÊ VAI CONFIGURAR A COR DA LETRA QUANDO PASSA O MOUSE */
background-color: #efceeb; /* NESSA AREA VOCÊ VAI CONFIGURAR A COR DO FUNDO QUANDO PASSA O MOUSE */
}
</style>
<a id="menuzinho" href="URLDOLINK">LINK 1 COLOQUE O NOME DO LINK AQUI</a>
<a id="menuzinho" href="URLDOLINK">LINK 2 COLOQUE O NOME DO LINK AQUI</a>
<a id="menuzinho" href="URLDOLINK">LINK 3 COLOQUE O NOME DO LINK AQUI</a>
<a id="menuzinho" href="URLDOLINK">LINK 4 COLOQUE O NOME DO LINK AQUI</a>
<a id="menuzinho" href="URLDOLINK">LINK 5 COLOQUE O NOME DO LINK AQUI</a>
Sempre que você quiser acrescentar algum link ao menu, copie o código da linha abaixo, no final do seu código do menu.
<a id="menuzinho" href="ENDEREÇO DO SEU LINK">NOME DO SEU LINK </a>
Ele deverá ficar mais ou menos assim, isso depende de você.
<a id="menuzinho" href="http://mundodeblogueira.blogspot.com.br/">HOME </a>
Amei!! Ficou super fofo mas eu não achei a cor ideal pra colocar no meu fundo, então desisti! Mas talvez depois eu volte a procurar ache e use.
ResponderExcluirhttp://thoughtsfromjulia.blogspot.com.br/