------------------------------------------------

Mini Menu Cute


Olá cherry, como vão vocês em ? Bem?
Muita gente na FanPage do blog estava comentando do novo menu do blog e querendo saber como se fazia. Ai resolvi postar pra vocês o Tutorial e onde eu aprendi.

Agora ensinar a vocês a fazer um mini cute menu. Como esse abaixoSuper Boniitinho néh, o código em si é fácil, pois foi a Jackie Dream  que o personalizou  Porém a escrita que rola dentro desse menuzinhoMini gif 161 não é de autoria minha é do Blog Trechy teen. 


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 Mini gif 161


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 Vick 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 da Jackie Dream !! 
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: 




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







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







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







<!—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 coisinhasbá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 
Não se esqueçam que nesse Tutorial os créditos são todos da Jackie Dream eu só passei para vocês okay ?
Bijins da Vick*

Victoria Andressa

Instagram