5.3.12

Aprenda a fazer um "Menu Cute" para seu blog!


Olá ... Hoje o tutorial será fazer um menu cute e organizado (igual ao da página de Goodies). É simples, mas preste atenção para não errar nos detalhes ok!!? Antes de iniciar o tutorial salve uma cópia do seu template, caso algo de errado é só recoloca-ló!

Exemplo:
Clique em leia Mais e veja todo o tutorial!


 Clique  em Design - Editar html - e pressione a tecla ctrl + f e procure por:


]]></b:skin>


 Quando o encontrar logo acima  dessa tag, cole o código que está 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;
}

 Personalizando o Menu

 No URL do gif 1 coloque a url do gif  MINI GIFTque que irá aparecer quando o mouse não estiver no link  
 No URL do mine gif 2  você coloca a url do MiNI GIFT  que irá aparecer quando o mouse passar por cima do link.
 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).

Depois de tudo  personalizado clique em visualizar e salve!

 Cole o código abaixo onde você quiser pode ser em uma pagina ou em um gadget!

<div id="menuextra"><a href="Link ">Nome do link</a>
</div>
<div id="menuextra"><a href="Link">Nome do link</a></div>

 Caso você for coloca os códigos em uma página, cole na aba "Editar HTML".
Volte para a página "Escrever" e clique sobre o link. Clique em "alterar". Altere o nome e o link desejado.

Créditos:
Para a caixinha: Cherry Bomb
Para o tutorial: MeuMundoPiink

3 comentários:

  1. ooi , então , perfeito esse tutorial , mas ja que vs colocou como fazer poderia ensinar tbm como usa-lo , pq eu não sei como uzalo mas esta lá no meu blogger , poderia ensinar !
    Um beijão , e não esquece segui meu blogger ja que vs ja sabe o link dele rs ' Obrigado um BEIJÃo *--*

    ResponderExcluir
  2. não consegui que o gif aparecesse porque?

    ResponderExcluir
    Respostas
    1. Oi Ci... Então pode ser vários motivos.
      Verifique se o url do gift esta correto e hospedado.
      Verifique se vc não deixo espaço entre as aspa ( ' ) e o url. Talvez vc tenha o pagado sem querer...
      De uma revisada no código e veja se esta tudo correto mesmo :)

      Excluir

* Primeiramente muito obrigada pela visita.
* Volte sempre que puder, ficarei muito feliz.
* Seja educado (a), comentários ofensivos não serão aceitos.
* Críticas construtivas, sugestões e elogios são bem vindos.
* Se pegar alguma coisa, credite sempre.

Página Anterior Próxima Página Home
Copyright © Blog da Ka |
Design by Karina Karoline | Tecnologia do Blogger
    Twitter Facebook Google + YouTube