Seu blog mais lindo: Menu Pixel

large

Credito para o blog TUTORIAR

Olá pessoal, tudo bem? Espero que sim! – Uma leitora me pediu ontem através dos comentários do blog que eu fizesse mais posts relacionados a tutoriais para o blog, sendo assim, hoje eu fui em busca de tutoriais bacanas para vocês, até criei um novo blog, mas é apenas um blog de teste, mas como eu usei um template que já tinha menu, eu não testei esse que vou ensinar hoje, até porque um menu em cima do outro ia ficar feio, né? O menu funciona bem direitinho, é só saber colocar, mas com as dicas, eu tenho certeza que não será problema para vocês.

Live Preview

Queria deixar avisado para você que assim como eu, usa a plataforma do WordPress, que o tutorial não funciona no W.P, somente na plataforma do blogger.

Entre no seu blog e vá em  Modelo > Editar HTML  e procure (Ctrl + F) por  b:skin e acima dele cole o código abaixo.

cats

@font-face { font-family: Smallest ; src: url(‘http://static.tumblr.com/aicgjw6/7VGmoaydh/smallest_pixel-7.ttf’) }
//* Menu de extras por tutoriar.net *//
pixel { padding:3px;
color:#fff; /* cor */
display : block;
text-decoration : none;
border: 1px solid #281b32; /* bordas */
background :#513a63 ; /* fundo do menu */
padding-left : 10px;-webkit-transition:0.5s;
text-shadow: 1px 1px 1px #271b30; /* sombra do texto */
margin:1px;
font-family: Smallest ; /* fonte, recomendo não mudar */
font-size:10px; /* não mude! */
}
pixel:hover {
font-family: Smallest ; /* fonte, recomendo não mudar */
font-size:10px; /* não mude! */
padding:3px;
color:#fff; /* cor */
display : block;
letter-spacing : 0;
border: 1px solid #aa2845; /* bordas */
text-decoration : none;
margin-bottom : 1px;
background :#ff5b7f ; /* fundo do menu */
padding-left : 10px;-webkit-transition:0.5s;
text-shadow: 1px 1px 1px #dc4a6a; /* sombra do texto */
//* Fim do menu de extras por tutoriar.net *//

Para o menu funcionar, cole o código abaixo onde você quer que ele apareça.

cats

<a href=”LINK“><pixel>TÍTULO</pixel></a>
<a href=”LINK“><pixel>TÍTULO</pixel></a>
<a href=”LINK“><pixel>TÍTULO</pixel></a>
<a href=”LINK“><pixel>TÍTULO</pixel></a>

E ai, gostaram? Eu espero que sim e espero que de certo também! Os créditos para o blog já estão no início do post.

O endereço do novo blog é esse AQUI, mas ele é apenas um blog de teste, não será usado para postagens e nem como endereço fixo do blog. Gostou do template do nosso novo blog? Pede nos comentários que eu passo para você!

Anúncios

2 comentários sobre “Seu blog mais lindo: Menu Pixel

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s