25/06/2013

Tutorial: Menu Bubbles


Olá amorecos()
Bom, eu ia postar ontem mas a Nathy não deixou ashuash' T^T, tenho que cumprir as ordens da patroa, 
* cês sabi cumé * u-u, e outra coisa:
Se vocês não tiverem gostando de mim me digam, eu preciso saber :)
Hoje trago um tutorial de um menu muito fofinho que eu achei no htmlstrew.tumblr.com créditos pra lá u-u 
Espero que gostem, beijus *3*

visualize o menu aqui


Luz, câmera e ação!


1. Vá em modelo - Editar HTML - Clique em qualquer lugar na caixa e aperte Ctrl+F e procure por: <head> e acima dele cole o seguinte código:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>
<link href='http://static.tumblr.com/e2dfyqw/wIqmgvn5t/buttttt.css' rel='stylesheet' type='text/css'></link>

2. Aperte Ctrl+F novamente e procure por: ]]></b:skin> e acima dele, cole o seguinte código fazendo suas alterações:


/*** menu bubbles por htmlstrew ***/.gud.button{padding:10px 20px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:15px; text-transform:uppercase; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#fff !important; border:1px solid #fff !important; background-color: #c8dbd4; margin-left:2px; text-shadow:1px 1px 0px #8B9893;}.gud.button:hover{ background-color:#c8dbd4;}
Visualize, se estiver tudo nos conformes, salve (;


3. Vá em layout - Adicione um Gadget - HTML/JavaScript e cole:


<a href="http://www.blogger.com/" class="button gud">link</a><a href="http://www.blogger.com/" class="button gud">link</a><a href="http://www.blogger.com/" class="button gud">link</a><a href="http://www.blogger.com/" class="button gud">link</a>
Cabooou *-*


12 comentários:

  1. O menu é lindo, e bem fofo u3u
    Beijos ;*

    undercover-html.blogspot.com

    ResponderExcluir
  2. o menu é super lindo ... ja usei em um layout meu .

    seu blog esta perfeito .
    desculpe a demora de visitar seu blog e tal eu estava sem net , e ficou meio complicado de comentar .

    beijos candyedream.blogspot.com

    ResponderExcluir
  3. OMG! Amei esse menu, super fofo *--* Vou usá-lo no próximo lay!
    Beijos <3
    http://garotasatrevidas-s2.blogspot.com.br

    ResponderExcluir
  4. Awn, que menu lindo e fofo *o*
    cr4zy-world.blogspot.com

    ResponderExcluir
  5. Nossa, que menu mais lindooo
    Amei
    Beijos
    Seguindo akii
    http://cupcakevirtual2012.blogspot.com.br/

    ResponderExcluir