9 de ago de 2012

Tutorial: Menu Coração


Oii amadinhos de Chay, tudo bem?! Eu queria começar dizendo que estou meio triste ultimamente, os comentários sumiram! Cadê os leitores do Pincelando?! Animação aí em povo.
Bem, tirando isso, eu trouxe um tutorial mega básico, fácil e fofo, não demora nem 5 minutos, que é o Menu Coração, vamos ver?!

Ele é igual o daqui do Pincelando, para quem não encontrou ainda, aqui está:



 Clique para visualizar melhor ♥

Faz o seguinte então, vai em:

 Desing ~> Editar HTML ~> Dê um Ctrl+F ou F3 e procure pela tag:

]]></b:skin>

Achou amadinho?!
Acima dessa tag, coloque o seguinte código:

.heart {
margin-bottom: 1px;
display : block; 
font-size: 8pt; 
font-family: verdana, Lucida Sans Unicode; 
line-height: 15px; 
border-bottom : 1px solid #f4f4f3; 
text-indent : 5px; vertical-align : middle; 
background: url(‘http://media.tumblr.com/tumblr_lthtfr1bHI1qhr3p9.png’) no-repeat left; 
padding-left : 10px; 
padding-bottom : 2px;
}
.heart:hover {
display : block; 
font-size: 8pt; 
font-family: verdana, Lucida Sans Unicode;
line-height: 15px; 
border-bottom : 1px solid #f4f4f3; 
text-indent : 5px; vertical-align : middle; 
background : url(‘http://media.tumblr.com/tumblr_lthtfxbeiR1qhr3p9.png’) no-repeat left; 
padding-left : 10px; 
padding-bottom : 2px;
margin-bottom: 1px; 
background-color: #eee; 
}

Prontinho! Aí vai de você querer mudar alguma coisa ou não, mas eu acho bem mais bonitinho assim, do jeito que o código está.
Para usar, vou ensinar duas maneiras mais comuns:

No Gadget:
Layout ~> Adicionar um Gadget ~> HTML JavaScript ~> Cole:

<div class=”heart”> Frase aqui </div>

ou se for um link:

<div class="heart"><a href=" Link aqui "> Frase aqui </a></div>  


Em uma página:
Mega simples, olha só:
Vá na página desejada ~> Clique na aba "HTML" ~> Cole:

<div class=”heart”> Frase aqui </div>


ou se for um link:



<div class="heart"><a href=" Link aqui "> Frase aqui </a></div>  



Muito simples não é? Um dos menus mais fáceis que usei e apliquei num layout.

Créditos do tutorial :
----------------------------------------------------------------------------------------------------------

Queria agradecer a Ninha, por ter feito os prints para mim, porque minha tecla está com um P.D.F.N.I.A(problema de funcionamento não identificado ainda).


Por hoje é só em pessoal, até terça-feira, bom final de semana!


image
Awn gracinha *---*

Beijos pikuchos ^3^



4 comentários:

  1. posso te dar uma dica anjo? muda isso de ficar rolando aqui pra ver a postagem. Deixa normal minha linda, vou adorar. Porque seu blog é lindo demais, só tem que mudar isso pra ficar perfeito finalmente.

    Bom, essa é minha dica.
    http://apsmass.blogspot.com/

    ResponderExcluir
    Respostas
    1. ahsua amo seu blog também, mas concordo com o Moises ><

      Excluir
  2. Reblogei e estou a usar com creditos ^^

    ResponderExcluir
  3. Gentee, admito ñ sei usar essas coisas!! Me da um help o-o??

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada