Mini Menu Cute

Foto: [dookiewoop.tumblr.com]

Esse tuto, que eu aprendi no Jackie Dream, sendo parte dos códigos encontrados no antigo Trechy Teen (só para esclarecer os créditos). Espero que gostem! Vai, Leia Mais!



TUTORIAL

Vá para edição HTML e procure por: ]]></b:skin>

Após achar, cole ACIMA disto:

/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #CDB7B5;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('URL DO MINI GIF 1') no-repeat left;
padding-left : 10px;
}

#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FF69B4;
background : url('URL DO MINI GIF 2') no-repeat left;
padding-left : 10px;
}

Neste código, altere a borda, a linha é esta:
border-bottom : 1px(TAMANHO) dashed(ESTILO)  #FF69B4(COR);

 Tabela De Cores

Altere também, os mini gifs que aparecem ao lado do título das suas páginas, normal (1) e ao passar o mouse (2).

Certo? Pode salvar! Agora, adicione um Gadget HTML/JavaScript. Nele, cole:


 <!—Mini cute menu -->
          <table height="270" align="center" background=" http://1.bp.blogspot.com/-hy8t1zg4HOo/UADt8KQGmvI/AAAAAAAACBE/nW5C5kPBRRs/s1600/menu1.jpg " border="0" style="width: 150px">
      <tr>
        <td style="height: 52px"></td>
      </tr>
      <tr>
        <td height="115" align="center" valign="middle"><a href=" " style="text-decoration:none; cursor:crosshair">
  <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollAmount="1" direction="up" height="100" style="width: 114px">
   <div align="center"><font face="Arial, Helvetica, sans-serif" color="#FF69B4" size="-1"><b> Cute Menu: </b><br />
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
</font></div></marquee></a></td>
      </tr>
    </table><!-- Fim do mini menu jackie dream -->

Substitua o "Link" e o "Nome do link" e a cor ou estilo do texto ok? Adicione mais se precisar.


Que vai ficar assim, veja:





O background foi feito por mim, mas os créditos do tutorial são: Jackie Dream & Trechy Teen! Espero que tenham curtido ;D