6 de dez de 2012

Menu destaque

Boa noite, gente ontem morreu um dos maiores brasileiros de todos os tempos. Oscar Niemeyer admirado por muitos, e que deixou uma história e tanto pra nós. Bom vamos nos alegrar um pouco e hoje trouxe um tutorial que eu uso aqui neste modelo de layout, esse menu de novidades que eu utilizo ai na sidebar, eu converti ele pro blogger, sei que já tem muita gente usando ele mais também tem gente que ainda não sabe fazer né?! O nome dele é menu destaque e eu peguei do Things To Help You então créditos pra eles.
Primeiro cole o seguinte código no seu css antes de ]]></b:skin>


.destaque {
float: right;
margin-right: -05px;

margin-top: -4px;

background: url('http://static.tumblr.com/tx5g7yp/nFYmaau44/bot__o.png');

background-repeat: no-repeat!important;
width: 64px;

height: 25px;}



.boxdestaque:hover .destaque {
background-position: -0px -25px;}



.boxdestaque {
text-align: left;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;
margin-right: 7px;
background: #6B8D42;

padding: 5px;

margin-bottom: 7px; }



.boxdestaque:hover {
background: #C22127;

text-shadow: 1px 1px 1px #fff;}



.boxdestaque .title {
color: #000;

font-size: 11px;

font-weight:none;

font-family: Georgia;
font-style: italic;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

transition: all 1s ease;}
.boxdestaque:hover .title{
color: #7797a7;

padding-left: 15px;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;
transition: all 1s ease;}
.main img {
border: 3px solid #C22127;
-webkit-transition-duration: .50s;
}
Altere o que achar necessário mas não mecha em códigos que você não sabe o que é ok?!
Agora abre um gadget JAVA e cole o seguinte código.


<div class="boxdestaque">
<span class="title">Titulo que deslisa quando passa o mouse
<a class="destaque" href="Link que será redirecionado"></a>
</span>
</div>
Para aparecer mais de uma opção no menu basta repetir o código do JAVA .
_Guuh

16 comentários:

  1. Muito útil esse menu, eu acho que no meu próximo layout eu vou usar :3 e-e :D :)
    sereifelizz.blogspot.com.br

    ResponderExcluir
  2. Lindo ^^ Vou usar no meu próximo lay!

    Bejus :*
    http://pequena-julieta.blogspot.com.br/

    ResponderExcluir
  3. Legal esse menu.

    blog-da-marci.blogspot.com.br

    ResponderExcluir
  4. Daora esse menu em irmão kkkkkkk. Ta super bonito menu. :3
    jovenclube(.blogspot.com.br)

    ResponderExcluir
  5. Adorei o menu, esse com certeza vou salva nos favorito.

    garotoimoral.blogspot.com

    ResponderExcluir
  6. bem legal o menu!

    the-zombieworld.blogspot.com
    Becky Nunes

    ResponderExcluir
  7. Que lindoo, muito perfeito o tutorial *-*
    Seguindo seu blog :3
    blog-sassygirl.blogspot.com

    ResponderExcluir
  8. Ahh Que blog lindo ,adorei o post , é bem dificil encontrar blogs com tutoriais agora ...

    #Bjsss

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir