Tutorial - Menu novidades
Boa tarde! Nossa parece que o ultimo post foi ontem o.o já tem 6 dias. Agora com as férias tudo vai melhorar, eu vou finalmente postar mais quem sabe até uns 2 posts por dia né?! -sqn. Então eu estou com várias ideias de projeto pra trazer para o blog. Em fim tem um tempinho que eu não posto tutoriais por aqui, e eu nem estava com planos de postar por agora mas acontece que meu maninho da blogosfera me pediu pra postar como faz aquele menu de novidades ali então, let's go?!
O tutorial é fácil de fazer, mas você tem que saber pelo menos as noções de HTML.
Abra o HTML do seu blog e cola o código no seu CSS
.novi{width:180px;height:50px;background-color:#dad9da;text-align:left;text-indent:5px;margin-left:57px;font-family:bebas neue;font-size:25px;color:#4e3b4f;margin-top:10px;}
.novi p{font-size:17px;line-height:14px; margin-top: -01px;}
.novi img{width:50px;height:50px;position:absolute;margin-left:-74px;}
.novi:hover img{-webkit-animation:brilha 0.7s;-moz-animation: brilha 0.7s;}
.novi:before {content:"";position: absolute;width: 0;height: 0;border-top: 2px solid transparent;border-right: 16px solid #dad9da;border-bottom:8px solid transparent;margin: 22px 0 0 -21px;}
Mude os códigos das cores conforme sua preferencia, lembrando que os códigos de cor começa com "#"
Depois de alterar os códigos cole o seguinte código em um Java/Script.
<a target="_blank" href="SEU LINK AQUI"><div class="novi"><img src="IMAGEM DO MENU" align="left" />NOME DO POST DESTACADO<p>DESCRIÇÃO</p></div></a>Faça as alterações e repita o código para colocar mais opções.
Nossa, que simples kkk >.<
ResponderExcluirTu é vidente? HSAUASH eu queria saber esse menu u.u
Vou usar ele no meu próximo template *-*
Amei o tutorial,mais assim pensei que eu era seu irmão da blogosfera mais é assim mesmo :)
ResponderExcluirAte mais...
Adorei a dica, muito bom o blog!!
ResponderExcluirseguindo aqui :D
Siga o Monster Pop: http://www.monsterpop.com.br/
AAAAAAAAAAAH MDS MUUUUUUUUUITO OBRIGADO :3
ResponderExcluir