01/01/2013

【Tutorial】 Menu Fofinho com Fonte em Pixel

|| || ||

Ohayou, doces e docetes!
Como vão nesse início de ano
Bom, eu tava vagando por uns tumblrs de HTML, e vi um menu muito fofinho que me chamou atenção. 
Ele fica assim:


Fofinho né?
O único problema é que ele vem com esse fundo rosa, o que é ruim porque a maioria dos blogs tem gadgets com fundos brancos.
Maaaaaaaaaas com muito esforço eu consegui achar o lugar correto de mudar, e passei pro branco! \o/
Créditos do menu ao tumblr Things to Help You.



Pegue esse código abaixo e cole antes de ]]></b:skin>


/*** Fonte Small por Debs *****/
@font-face {font-family: "04b03";
src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype"); }
@font-face {font-family: "charnarr";
src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype");}
/*** Fim da Fonte Small*****/
 /*** Menu fofinho em pixel *****/
.menu{text-align: center;}
.menu a { background: #f4ccd2; color: #fff; width: 80px;display: inline-block; padding: 4px; font-size: 8px; font-family:"04b03", small fonts; font-size:8px; text-transform: uppercase;letter-spacing : 1px; margin: 1px; text-shadow: 1px 1px 1px #e7b8c0; border-bottom: 1px solid #e1a7b0; border-left: 1px solid #e1a7b0;}
.menu a:hover {background: #f5d0d5;}
.menubox {background: #ffffff; padding: 2px;text-align: justify; color: #fff; margin-bottom: 10px; margin-top: 10px;}
/*** Fim do menu fofinho em pixe *****/

A parte que está negritada é o fundo do menu. Caso o gadget de seu blog for de outra cor, basta trocar o que está negritado.
Ah, e tem outras partes com cores também. É só você ir descobrindo aos poucos o que mudar para ficar do seu jeito. (:
Feito isso, é só pegar esse outro código e colar em um gadget de HTML/Javascript:


<div class="menubox"><div class="menu">
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
<a href="/">Link</a>
</div></div>


Onde está com "/" é para colocar o link que deverá ser redirecionado quando alguém clicar. E substitua o "Link" pelo nome do... link.
É só isso, simples né?
Espero que tenham gostado! ^^




2 comentários:

  1. Ohum que menu fofinho ^^ É apaixonante-uhsuas
    Kissus x3
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
    Respostas
    1. ehueheuh' Fico feliz que tenha gostado! \o/

      Excluir

Regras:

- Pode deixar o link do seu blog, mas sem o "http"!
- Nada de comentar coisas sem a ver com a postagem, use o chat.
- Sem palavrões.