Tutorial - Menu Destaque

 

Bom dia, pessoal.

Hoje eu trouxe um tutorial de um menu que peguei no Things to Help You e transformei para blogger. O menu é super parecido com aquele que usei no primeiro gadget e serve na maioria das vezes para vocês colocarem as postagens mais populares do blog ou que estão em destaque. Ele não chega a ser igual, pois no meu eu fiz bastante modificações, mas o conceito é o mesmo e é bem bonito.

Não é difícil e como sempre é dividido em duas partes: Aquela do css, onde você precisa colar diretamente no código do seu blog e aquela que usamos dentro dos gadgets para fazer o menu aparecer. Não há nenhum segredo. Se quiserem ver a preview do menu cliquem aqui e sigam até o gadget "Menu Destaque".

1. Primeiro, vá até Editar HTML e procure por ]]></b:skin>. Acima dessa 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;}

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. Após editar como deseja, crie 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 se você quiser mais caixinhas, mas repita o código todo.