Menu Novidades

Trago para vocês mais um menu que achei super interessante, é o menu novidades,
para vê-lo clique aqui

Para colocar em seu blog coloque o código abaixo antes da tag ]]></b:skin>

.novi{
width:184px;
height:40px;
background-color:#ff8080;
text-align:left;
text-indent:5px;
margin-left:57px;
font-family:bebas neue;
font-size:20px;
color:#3C2A2A;
margin-top:5px;
}
 .novi p{
font-size:11px;
line-height:11px;
}
 .novi img{
width:40px;
height:40px;
position:absolute;
margin-left:-63px;
}
 .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: 18px solid #ff8080;
border-bottom:8px solid transparent;
margin: 22px 0 0 -21px;
}

@-webkit-keyframes brilha {
   0% { opacity: 0.5;}
   25% {opacity: 1;}
  50% {opacity: 0.5;}
    75% { opacity: 1;}
   100% {opacity: 0.5;}
   }
@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf');
}

Ele é super fácil de arrumar, basta trocar a imagem e as cores.

Para fazer funcionar coloque o código abaixo no gadget html/java script

<a target="_blank" href="LINK"><div class="novi"><img src="URL DA IMAGEM" align="left">TITULO DA NOVIDADE<p> SUBTITULO </p></div></a>
<a target="_blank" href="LINK"><div class="novi"><img src="URL DA IMAGEM" align="left">TITULO DA NOVIDADE<p> SUBTITULO </p></div></a>
<a target="_blank" href="LINK"><div class="novi"><img src="URL DA IMAGEM" align="left">TITULO DA NOVIDADE<p> SUBTITULO</p></div></a>
<a target="_blank" href="LINK"><div class="novi"><img src="URL DA IMAGEM" align="left">TITULO DA NOVIDADE<p> SUBTITULO </p></div></a> 

Obs: Personalize de acordo com a largura de sua sidebar. É só ir mudando os valores de width, height, margin, background-color, font-size...