Menu Destaque

A pedido de uma pessoa na C-Box, vim postar esse tutorial. É bem lindo o resultado. É um menu de destaques que nem o que está no nosso gadget Welcome. Fica lindo, vamos ao tutorial?



1. Vá em Editar Html >> Ctrl+F e procure por ]]></b:skin> e acima cole isto:

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

E personalize da seguinte maneira e depois salve:

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.

2. Depois de personalizar, vá em Layout e adicione um novo gadget, ou se preferir coloque em um gadget já existente. E no gadget cole:

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

Coloque o título da postagem e o link do post e pronto, se quiser ponha mais.
Espero que gostem, beijos!!!