mini cute menu

Heey pessoas quero ensinar a vocês a fazer um mini cute menu. Como esse abaixo. Super Boniitinho néah, o código em si é fácil, pois fui eu mesma que o personalizei  Porém a escrita que rola dentro desse menuzinho não é de autoria minha é do Blog Trechy teen. 

Cute Menu: Nome do link Nome do link Nome do link Nome do link

Clique em  leia mais  e confira o tutorial completo

Não é nada complicado eu juro! É só prestar a atenção confesso que dá um pouquinho de trabalho mais não dá pra negar o resultado é lindo !!  Mãos a obra vamos nessa ... .... 


vá no seu HTML e pressione as teclas ctrl  f e procure por:


}]]></b:skin>                                          ou                              ]]></b:skin>


Essa tag vai aparecer bem destacada, ''ACIMA'' dela cole o código abaixo:

/* 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 MINE 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 MINE GIF 2') no-repeat left;

padding-left : 10px;

}

Feito isso agora é a hora de personalizar seu menu:

Onde tem URL DO MINE GIF 1 coloque a url do mine gif que que irá aparecer quando o mouse não estiver no link .

Onde tem URL DO MINE GIF 2 você coloca a url do mine gif que irá aparecer quando o mouse passar por cima do link.

 Mini gifs clique aqui 

Onde tem o código : #CDB7B5

é a cor da barrinha pontilhada que sublinha o link quando o mouse não está no link.

Onde tem o código :  #FF69B4

é a cor da barrinha que sublinha o link quando o mouse passa por cima.


quando terminar , salve.

Boom o menu está pronto e vsê pode utiliza lo  da forma que quiser , tanto na   postagem quanto em uma  pagina ou até mesmo como  gadget. 

Atenção o Tutorial acima é de total autoria de Candy Reis!  Aah jackie então porque você pegou? porque este tutorial complementa e da um acabamento mais bonitinhu para o ''mini cute menu'' que vocês vão ver logo abaixo, que é de total autoria minha !! 

Boom gente feito tudo isso é hora de aprender a editar o mini cute menu! é muito simples escolha um dos modelos abaixo e copie o código dele e cole no Bloco de notas, e faça passo a passo comigo, não tem erro (:

Cute Menu: Nome do link Nome do link Nome do link Nome do link

<!—Mini cute menu -->

          <table height="270" align="center" background=" http://i.imgur.com/GNmaf.png " border="0" style="width: 130px">

      <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 -->

Cute Menu: Nome do link Nome do link Nome do link Nome do link

<!—Mini cute menu -->

          <table height="296" align="center" background="http://i.imgur.com/lfQfg.png" border="0" style="width: 180px">

      <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 -->

Cute Menu: Nome do link Nome do link Nome do link Nome do link

<!—Mini cute menu -->

          <table height="270" align="center" background="http://i.imgur.com/yqo52.jpg" border="0" style="width: 130px">

      <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 -->

Cute Menu: Nome do link Nome do link Nome do link Nome do link

<!—Mini cute menu -->

          <table height="270" align="center" background="http://i.imgur.com/Hwzwi.png" 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 -->

E aee escolheram ? cole no Bloco de notas. Boom gente grifei as coisinhas básicas que podem ser alteradas tá!


no trecho:
background="http://i.imgur.com/Hwzwi.png"
você pode apagar e colocar a url da imagem desejada, ATENÇÃO: só apague onde está destacado de vermelho!


no trecho:
color="#FF69B4"
você pode alterar a cor que esta escrito cute menu:


no trecho:
Cute Menu:
você pode escrever o que quiser


nos trechos:

<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>

Onde esta escrito ''Link'' você apaga e cola o link que sera redirecionado para a pagina desejada, ATENÇÃO: NÃO APAGUE AS ASPAS '' '' 

onde esta nome do link, coloque o nome do link, hauhauaha !!

se quer mais links no seu mini cute menu é só adicionar esse código:
<div id="menuextra"><a href="Link">Nome do link</a></div>

alguma dúvida é só comentar, mais vem cá gente vocês gostaram ? esse mini cute menu é mesmo uma gracinha e vcs podem usar de diversas formas

                                                                        
                                                                          Xau Xau