Tutorial Menu Destaque

Olá sorvetes de chocolate com baunilha, como estão?

Hoje eu vou postar alguns tutoriais e goodies para vocês, começando com o menu destaque.

Créditos no fim do post.

Vamos começar.

1. Primeiro vá em Modelo, Editar HTML e depois aperte Crtl+F e procure por ]]></b:skin> e acima da tag cole:

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

Vamos explicar isso ok?

Eu já coloquei em Negrito tudo o que precisa mudar.

Troque http://i1234.photobucket.com/albums/ff411/SweetLG/218.png pela imagem do seu botão.

Largura do botão - width: 64px;
Altura do Botão - height: 25px;

Cor de fundo sem ter passado o mouse- background: #eeecec;
Cor de fundo quando passar o mouse background: #f6dce5;
Cor da letra sem ter passado o mouse color: #ff71a3;
Tamanho da Letra- font-size: 11px;
Nome de sua fonte - font-family: Georgia;
Estilo da fonte font-style: italic;
Cor da letra quando passar o mouse color: #7797a7;

2. Quando tiver terminado, vá em Layout, crie um gadget HTML/JavaScript e cole o seguinte código:

<div class="boxdestaque">

<span class="title">Título da postagem

<a class="destaque" href="LINK DO POST"></a>



</span>



</div>

Se quiser mais caixinhas repita todo o código.

Créditos: Kawaii World

Blogueira Rebelde

Espero que tenham gostado!

Vou postar mais depois!

Kisses!