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.