Menu com Efeito hover



Hoooy amores ! (:
A pedido de um blogueiro muito querido , o Mrs. Kawaii dono do Blog Kawaii Fake // Oficial , vou ensiná-los a colocar este Menu com Efeito Hover.
É o menu igual ao do SG, fica bem fofo e é bem fácil de fazer. Vamos lá ?




[01] Vá em Design > Editar HTML
[02] Dê CTRL+F ( caixinha de busca )
[03] Procure pela tag:  </b:skin>
[04] ACIMA da tag encontrada, cole:

/***  Pagelist por Jessica - Modelo 5 ***/
menuj5 {font-family: Tahoma;width: 12%;float: left;background:#f6729a; /*** Altere a cor de fundo do menu ***/padding: 5px;text-align: center; margin: 2px;border-radius: 1em 2em 1em 2em;font-size: 10pt;color: #fff;text-shadow: 0 0 0.2em #87F, 0 0 0.2em #fff, 0 0 0.2em #fff;}menuj5:hover {font-family: Tahoma;width: 12%;float: left;background:#f5bccd; /*** Altere a cor de fundo do menu quando passa o mouse ***/padding: 5px;text-align: center;margin: 2px;border-radius: 2em 1em 2em 1em;font-size: 10pt;color: #e75c86;text-shadow: 0 0 0.2em #87F, 0 0 0.2em #fff, 0 0 0.2em #fff;}




[05] Salve.
[06] Agora, onde você quiser que o seu menu apareça cole a tag a seguir. Para isso, vá em: Layout > Adicionar um Gadget > HTML/Java Script.


<a href="Link da página"><menuj5>Link2</a> 

[07] Onde está em azul, você coloca o link da sua página.
[08] Onde está em vermelho, você coloca o nome da sua página ( ex.: Home, Goodies etc ... )
[09] Para criar vários links é só você ir repetindo esta mesma tag.
[10] Visualize, se estiver tudo certinho é só salvar.

Créditos à Jéssica do Blog Jess - Honey-pixel pelas tags.


Espero que tenham gostado !
Comenta aí embaixo e digam o que acharam !
Beijinhos ;*









10 comentários

  1. Adorei o menu :3

    Chassy Bomb | Blogspot

    ResponderExcluir
    Respostas
    1. aaain , que bom que gostou querida ! (:
      Beijins ;*

      Excluir
  2. amei o tutorial!! as minhas páginas já são mais simples!
    candyces.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou ! (:
      Volte sempre ! ^^
      Beijinhos ;*

      Excluir
  3. Obrigado pelo tutorial !
    Ta muito fácil muito prático e muito cute !
    Adoorei : )
    Bjolls ; **

    >> http://kawaiifake.blogspot.com/ <<

    ResponderExcluir
    Respostas
    1. Dia nada querido ! ^^
      Que bom que gostou ! (:
      Mil desculpas pela demora em atendê-lo.
      Bjins ;*

      Excluir
  4. ' Muito legal esse tutorial. Pena que não tenho um blog :(

    ResponderExcluir
  5. Que legal! Fica muito fofo, mas já uso o menu como navbar, sabe? Adorei aqui também, obrigada pelo comentário fofo lá no blog, fiquei muito feliz, de verdade :D E já tô seguindo aqui, se quiser seguir lá :)
    Beijos,
    Siimsenhorita / .tk (O Blogger exclui blogs que colocam o link, entretanto se você for retribuir o comentário retire a barra. Obrigada)

    ResponderExcluir
    Respostas
    1. Que bom que gostou amoor. Sei sim , fica muito legal desse modo também , qualquer dia desses vou ensinar como colocar este menu , fica bem legal. (:
      Muito obrigada por seguir, eu que agradeço e é claro que retribuo , viu. ;)
      Beijinhos, volte sempre ;*

      Excluir

~ Obrigada por comentar ! (:
Volte seempre ! ♥

-Não aceitamos tags e selinhos.

Layout por Maryana Sales - Tecnologia Blogger