Menu novidades

Yo minna-san!!!

Boa noite, como vão? Peço desculpas por só postar a esta hora, afinal hoje é dia das mães e  me dediquei inteiramente a minha mas, mudando de assunto. Ontem recebi uns 5 comentários pedido para postar o menu anteriormente usado no Gadget "TAG's", realmente não fazia ideia de qual era o menu, pois quem fez meu layout anterior (Kuroshitsuji) foi a Roh, mas ela já me passou então trago aqui para vocês. Os créditos são inteiramente do tumblr H.A.M eu já o conhecia mas não cheguei a ver esse menu antes, coisa que achei bem legal. E mais uma vez, obrigada pelo layout Roh. Caso queira dar uma olhadinha no menu aqui esta (Menu Novidades) Então vamos lá?

Brevia do efeito

1. Para começar vá ate o blog qual deseja adicionar o menu, então vá ate Editar Modelo. Abra sua aréa de códigos e então a selecione e use o atalho Ctrl+F. Então pesquise por ]]></b:skin>, assim que o achar acima dele adicione este código:

Códigos

.novi{width:210px;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:14px;line-height:14px;}
.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;}

@-webkit-keyframes brilha {
  0% { opacity: 0.5;}
  25% {opacity: 1;} 
  50% {opacity: 0.5;}
   75% { opacity: 1;}
  100% {opacity: 0.5;}
  }

2. Ele é super fácil de arrumar, basta trocar a imagem e as cores. Depois de tudo arrumadinho vá ate seu Layout e abra um gadget de HTML/JavaScript e dentro, cole:

Códigos

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

Se quiser usar a mesma fonte, cole isso no seu CSS (acima de ]]></b:skin>): 

Códigos

@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf'); }

Bem é isso, então gostaram? Espero que sim, se tiverem duvidas basta perguntarem. Então ate a próxima.