Semana de Tutoriais :: Menu Destaque

Hoy meninas :3 tudo bom? :) Hoje estreando a nossa linda semana de tutoriais teremos o Menu Destaque,ela é super fofo caso você queira chamar uma atenção especial para um certo post,ou para os mais recentes :3 Eu juro pra vocês que eu esqueci que hoje é segunda :o mas caiu a fixa e estou aqui postando :3 bem,esse tuto eu achei no Bunny Crazy ♥ então créditos a ele :) para ver o Menu {aqui}

Menu Destaque

 Vá até Editar HTML e então procure por]]></b:skin>. Assim que o achar, acima dele adicione todo esse 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;}

explicando as partes principais do código:

Imagem do botão: http://i1234.photobucket.com/albums/ff411/SweetLG/218.png  - Troque pela url de outro botão.
width: 64px; - A largura do botão.
height: 25px; - A altura do botão.
background: #eeecec; - Cor do fundo sem passar o mouse
background: #f6dce5;  - Cor do fundo ao passar o mouse. (Hover)
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. (está definida para itálico)
color: #7797a7;  - Cor da letra ao passar o mouse.

Depois de tudo feito, salve! Então vá para layout e abra um novo 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> 

Se você quiser mais caixinhas, repita todo o código, um abaixo do outro.

                                                                                                                

Bem por hoje é só :3 amanhã tem mais tutorial hein :3 beijos