12 de set. de 2013

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...


8 comentários :

  1. Amor, nenhum menu que eu tento colocar no meu layout funciona. O que pode estar acontecendo?

    ResponderExcluir
  2. Cinthia, você pode estar colocando algum código errado, pode estar esquecendo
    de colocar ; ou { ou }, alguma destes códigos é importante no layout.
    Preste atenção quando for digitar ou colar algum código.
    Espero ter ajudado.

    ResponderExcluir
  3. só não entendi aonde coloca aquele codigo que faz funcionar

    ResponderExcluir
  4. e também claudine amiga nenhum funcionou no meu, xau beijo

    ResponderExcluir
    Respostas
    1. Gabriela, você deve estar copiando algum código errado.
      Todos os menus foram testados.

      Excluir
  5. Florsinha seu blog é incrível, eu amei todos os tutus e goodies! lindos e fofos ^^ estou usando grande parte dos seus tutus no meu novo blog, adcionarei o seu blog nos créditos do meu e no divulgando. AMEI DE VERDADE :3
    http://sweetmiyu.blogspot.com/ quando estiver pronto, trarei um convite aqui para você ve-lo.

    ResponderExcluir
    Respostas
    1. Ayumi, fico feliz que tenha gostado dos tutoriais aqui postados.
      Obrigada pelo carinho.
      Seu blog vai estar nos afiliados do Princess Tutoriais.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo