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ê!



You May Also Like

2 comentários

  1. Esse menu é mesmo lindo! Se não me engano já o usei! Amei o tutorial <3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  2. Lindo mesmo, né? Queria colocar no W.P, mas infelizmente não da =/.

    ResponderExcluir

INSTAGRAM | @LOOWINVERNISSI