5.2.13

Menu Cute

Tumblr_mhq54q4vfb1rfjxkvo1_500_large
Yoo Amoras...
~Boa noite
Tudo bem??
Me desculpem por não ter postado mais cedo, mas hoje minha mãe disse que eu poderia entrar no computador a noite...
Mas voltando ao post, vocês já devem ter visto eu usando um tipo de menu em algumas postagens (como a passada) e eu achei legal fazer o tuto aqui, para que vocês também usem, ele deixa as postagens mais fofinhas e organizadas! Para quem ainda não viu o resultado será parecido com este:


Vamos aprender a fazer??

Vá em "Modelo" >> "Editar HTML" >> Aperte Ctrl F ou F3  e procure por:

]]></b:skin>
Acima da tag que acabamos de procurar, cole o seguinte código:
/* 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;
}
Personalizando
 As partes em negrito devem ser alteradas pelas cores que você deseja no pontilhado logo abaixo da frase do menu, normal e hover respectivamente. As partes em azul devem ser alteradas por URLS de mini gifs. Aonde diz "URL DO MINI GIF 1" é o mini gif que vai aparecer sem você passar o mouse sobre o menu, o "URL DO MINI GIF 2" é o mini gif que vai aparecer ao passar o mouse sobre o menu!

Clique aqui para ver alguns mini gifs e clique aqui para ver a tabela de cores 
Agora tem a 2º parte, adicionar o código a seguir no lugar aonde você quer ver o menu. Ele funciona em Gadgets (HTML/JavaScript) e em postagens! 
<div id="menuextra"><a href="Link ">Nome do link</a></div><div id="menuextra"><a href="Link">Nome do link</a></div>
                               Repita o código quantas vezes for necessário

Bem pessoal, é isso! Espero que tenham gostado do tuto de hoje!!
Comentem o que vocês acharam!! =)
Kissus~
OBS:
 O post não tem créditos, pois eu tenho o código deste menu salvo a algum tempo, e não me lembro em qual blog eu peguei... Se o menu for de sua autoria me avise para que eu possa lhe dar os devidos créditos!!

8 comentários:

  1. Fica super kawaii ;3
    Aceita afiliação?
    http://resources-pfvr.blogspot.com.br/

    ResponderExcluir
  2. Já te coloquei na elite!! ^^
    Kissus~

    ResponderExcluir
  3. Que lindo o menu! nossa.. seu blog é fofo! *O*

    Beijos
    rufflescom-chocolate.blogspot.com

    ResponderExcluir
  4. Também achei o menu lindo!! E obrigada, espero que tenha gostado do blog =)
    Kissus

    ResponderExcluir
  5. lindo aceita afiliação?
    http://taimi-kawaii.blogspot.com.br/

    ResponderExcluir
  6. Talvez eu use no próximo layout eu use amei seu blog e seus goodies amei tudo mesmo me conquistou fofa beijos.

    ~Kiss

    http://apenasdoze.blogspot.com.br/

    Obs - Aceitaria parceria do Apenas Doze
    Nome do blog - Apenas Doze
    Url do blog - http://apenasdoze.blogspot.com.br/

    ResponderExcluir