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>Altere o que achar necessário mas não mecha em códigos que você não sabe o que é ok?!
.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;
}
Agora abre um gadget JAVA e cole o seguinte código.
Para aparecer mais de uma opção no menu basta repetir o código do JAVA .
<div class="boxdestaque">
<span class="title">Titulo que deslisa quando passa o mouse
<a class="destaque" href="Link que será redirecionado"></a>
</span>
</div>
_Guuh
Muito útil esse menu, eu acho que no meu próximo layout eu vou usar :3 e-e :D :)
ResponderExcluirsereifelizz.blogspot.com.br
Obrigado (=
ExcluirLindo ^^ Vou usar no meu próximo lay!
ResponderExcluirBejus :*
http://pequena-julieta.blogspot.com.br/
haha Obrigado
ExcluirLegal esse menu.
ResponderExcluirblog-da-marci.blogspot.com.br
Daora esse menu em irmão kkkkkkk. Ta super bonito menu. :3
ResponderExcluirjovenclube(.blogspot.com.br)
Valew Irmaão
ExcluirAdorei o menu, esse com certeza vou salva nos favorito.
ResponderExcluirgarotoimoral.blogspot.com
(-= Thank's
Excluirbem legal o menu!
ResponderExcluirthe-zombieworld.blogspot.com
Becky Nunes
(=
ExcluirQue lindoo, muito perfeito o tutorial *-*
ResponderExcluirSeguindo seu blog :3
blog-sassygirl.blogspot.com
Obriigado
ExcluirAhh Que blog lindo ,adorei o post , é bem dificil encontrar blogs com tutoriais agora ...
ResponderExcluir#Bjsss
http://quandochegardezoito.blogspot.com.br/
ée nada shuahsa Obg *-*
Excluir