Tutorial - Menu Destaque

Hey!

Tudo bem?

Eu amei muito esse novo layout do blog, acho que super combinou.

Sem falar, que eu adoro Harry Potter, mas só via quando eu tinha uns cinco aninhos, e eu ficava com muito medo.

Estou louca para saber das novidades que o Thiago citou, sou chata mesmo.

Bom, hoje, estou trazendo o tutorial do Menu Destaque, que eu acho, que é um menu muito divo, mas que tem de ser usado com moderação, haha!

Eu peguei esse tuto no Kawaii World, então, créditos.

Veja o menu clicando aqui.

1. Primeiro, já em seu HTML, procure por: ]></b:skin>, e acima da tag, cole o seguinte código:

.destaque {float: right;margin-right: -10px;
margin-top: -5px;
background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/218.png');
background-repeat: no-repeat!important;width: 64px;
height: 25px;} .boxdestaque:hover .destaque {background-position: -0px -25px;} .boxdestaque {text-align: left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;margin-right: 7px;background: #eeecec;
padding: 5px;
margin-bottom: 7px; } .boxdestaque:hover {background: #f6dce5;
text-shadow: 1px 1px 1px #fff;} .boxdestaque .title {color: #ff71a3;
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;}

Explicação desse enorme código:

http://i1234.photobucket.com/albums/ff411/SweetLG/218.png - Troque pela url do seu botão. width: 64px; - Largura do botão.height: 25px; - Altura do botão. background: #eeecec; - Cor do fundo sem passar o mouse. background: #f6dce5; - Cor do fundo ao passar o mouse. color: #ff71a3; - Cor da letra sem passar o mouse. font-size: 11px; - Tamanho da letra. font-family: Georgia; - Nome da fonte. font-style: italic; - Estilo da fonte. (aí está definida para itálico) color: #7797a7; - Cor da letra ao passar o mouse. 

Agora, em um gadget de HTML/JavaScript ,e nele, cole:

<div class="boxdestaque"><span class="title">Título da postagem<a class="destaque" href="LINK DO POST"></a></span></div>

Repita todo o código acima, para adicionar mais posts.

Bom, foi isso. Mais tarde, volto com alguns utilitários.


Este tutorial, foi pego no Kawaii World, mas está postagem foi escrita por mim, mas se copiarem, creditem aos dois blogs!

Bjs,

Laah Chan