terça-feira, 26 de julho de 2011

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 menuzinhoMini gif 161 não é de autoria minha é do Blog Trechy teen. 



Clique em  Mini gif 58leia maisMini gif 58  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 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 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:





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

30 comentários :

  1. Vixi mais fico bom de mais da conta hihihi, adorei todos eles viu!? bjs
    http://tudosobreanimeemanga.blogspot.com/

    ResponderExcluir
  2. muito legal, mas eu nao entendo naaaaada disso :s

    ResponderExcluir
  3. Nossa fico Lindinho demais adorei *--*

    :l:

    ResponderExcluir
  4. Que lindo *-*
    ensina fazer um link para flog?
    Boa quarta ;D
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  5. Adorei o blog, super fofo *-*
    Seguindo.. segue tbm ?
    http://blush-corderosa.blogspot.com
    Beijinhos ♥

    ResponderExcluir
  6. Own, que graçinha! Amei o menu, ficou ainda mais fofo com a base (do gadget) que você fez *--*. Isso ajuda muito.

    Beijinhos, (seguindo,segue também?)
    bonequinhadeluxo10.blogspot.com

    ResponderExcluir
  7. Oiie Jackie ! Queria saber se você gostaria de fazer parceiria com o meu blog,por favor responda...
    bjssssss :h:

    ResponderExcluir
  8. oownt que fofo!
    Segue?
    http://sweets2dreams.blogspot.com/

    ResponderExcluir
  9. Mas ñ é de flog, é de blog mesmo rs
    Boa quinta ;D
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  10. Oiie Jackie,só para avisar já coloquei seu banner no meu blog,viu ??
    beijinhos !

    ResponderExcluir
  11. aMEI E VOU TENTAR COLOCAR NO MEU BLOG, POR QUE SOU INEXPERIENTE PRA ESSAS COISAS. RS


    http://anavidadeestilista.blogspot.com/

    ResponderExcluir
  12. Adorei o tutorial, vou tentar colocar no meu blog. rs tentar pois sou inexperiente nesse assunto! rs http://anavidadeestilista.blogspot.com/

    ResponderExcluir
  13. muito lindo :k:

    :l:

    vih-rockgirls.blogspot.com

    ResponderExcluir
  14. Own.. q lindo esse menu,amei jackie, quer dizer amo tudo deste blog...

    http://garotaa-popstar.blogspot.com/

    ResponderExcluir
  15. Jackie,eu nao entendi uma coisa...onde eu posso colar o codigo do 'Cute Menu' ? To perdidida.. rsrr

    ResponderExcluir
  16. @Giulia como HTML java script ou na aba HTML da postagem/página ;D

    ResponderExcluir
  17. o que eu faço com o que eu editei no bloco de notas? Adorooo tudo aqui, beijoos ;*

    ResponderExcluir
  18. @Bruna Nozari Depois de editar no bloco de notas vc copia e cola o código no lugar que vc quer que apareça o menu (:

    ResponderExcluir
  19. Não estou conseguindo colocar esse menu na minha página! Consegui perfeitamente no HTML java script, mais quando tento colocar no Html de uma página não funciona! Como faz???

    ResponderExcluir
  20. @Liliane Bom eu só copio e colo, não sei pq não esta funcionando com vc :(

    ResponderExcluir
  21. AAIINNN JACKIE :k: .. ficou lindoo obrigada mesmo .. adorei esse menu cute .. é muuuuito cute .. Parabéns pelo tutorial viu ? !!
    Bijins Vick*
    www.mundodavick2000.blogspot.com

    ResponderExcluir
  22. @Brenda Stine No meu caso fica aqui >>http://i.imgur.com/Qcwv3.png

    Mais qualquer coisa é só pesquisar na barra de pesquisa (:

    ResponderExcluir
  23. Oi =)
    AMEI o menu, talvez use um dia!
    Tenho duas perguntas para você : Como você fez aquela galeria de imagens do flickr?
    E em que site foi buscar os posts relacionados?

    Beijo e continue o bom trabalho!
    :l:
    http://luanarita.blogspot.pt/

    ResponderExcluir
  24. Que perfeitooos *0*
    cr4zy-world.blogspot.com.br

    ResponderExcluir

.