Menu Slaph - Exclusivo!


Boa Tarde tigres brancos. Ontem passei grande parte do dia mexendo com HTML e personalizando alguns templates na qual estou a fazer. Nisso, acabei entrando no KW Guide e li os tutoriais. Tá né? Comecei a fazer um menu, e até que estava dando certo. Arrumei uns probleminhas, e agora estou com ele para vocês usarem.
Ele ficou simples, por ser o meu primeiro. Mas, na minha opinião, muito bonito. Aprendi a mexer com RGB e RGBA e, logo usei nele pra ver se havia entendido corretamente. Deu certo! \o/. Ficou bem bonitinho, simples e facinho de usar.

Para visualizar, clique aqui.() Como avisei, ele é simples - e bonito. Nada demais, só simples. Caso tenha gostado e vá usar, dê créditos ao TSD e ao KWG - por que se não fosse por ele, não teria feito o menu. :3
Mas seguindo com a minha postagem: Vamos aprender a fazer o nosso menu?

1- Procure por ]]></b:skin> no seu HTML. Acima dessa tag, cole o seguinte código:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
 .slaph{
background: rgba(255,255,255, 0.3);
display: inline-block;
color: rgb(255,196,210);
border: 1px dotted rgba(255,196,210, 0.5);
width: 50px;
padding: 4px;
font-family: silkscreen;
text-align: center;
font-size: 8px;
text-decoration: none;
-webkit-transition-duration: .80s;
}
.slaph:hover{
-webkit-transition-duration: .80s;
background: #fbfbfb;
border: 2px solid rgba(251, 251, 251, 0.5);
color: #000;
text-decoration: none;
letter-spacing: 3px;
}
Marquei em itálico o local das cores onde você terá que mudar para personalizar o menu. Caso você não saiba modificar o RGB ou o RGBA, clique e veja o tutorial. A parte do HTML, eu recomendo a editar depois de colocar o menu. Assim, você pode ver como está a ficar.

2- Vá em Layout>Adicionar Gadget>HTML/Javascript. Nele, cole o código abaixo.

<center><a href="http://link_aqui/" class="slaph">Menu</a> <a href="http://link_aqui/" class="slaph">por</a> <a href="http://link_aqui/" class="slaph">The</a> <a href="http://link_aqui/" class="slaph">Secret</a>
<a href="http://link_aqui/" class="slaph">Diary</a> <a href="http://link_aqui/" class="slaph">Se usar</a> <a href="http://link_aqui/" class="slaph">Credite</a> </center>
Em itálico estão os links do menu, em negrito os nomes dos links e em sublinhado é o código que deixa o menu ao centro da sidebar. Modifique as partes necessárias, e terá o menu pronto para o uso.

Espero que tenham gostado do menu e tenham entendido o tutorial. Qualquer dúvida, é só perguntar pelos comentários, ou pela Ask.
/Ana

7 comentários:

  1. Adorei, ficou bem fofinho, Ana ^-^

    Beijos ;3 | Eu Amo HTML | {euamohtml.blogspot.com}

    ResponderExcluir
  2. Ain que fofo , amei de mais!
    Seguindo! http://srta-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah, fica super fofo. Testei no meu blog de testes! Você pode me dizer qual o nome da fonte do seu cabeçalho?! Obrigada! *----*

      www.garotapersonalizada.blogspot.com

      Excluir
    2. Obrigada. A fonte chama-se: "soymilk" rsrs'

      Excluir
  3. O menu é bem fofo. ♥

    http://catch-html.blogspot.com.br/

    ResponderExcluir