Tutorial: Menu destaque

março 05, 2013,23 Comments

Boa tarde rapaziada !

Hoje eu vou postar pra vocês um tutorial sobre "Menu destaque" que me pediram.

Pra quem não sabe o que é menu destaque, é isso aqui

E tem assim que é a mesma coisa só muda a imagem de "Confira" para "Ver"

Pode-se perceber que é quase o mesmo jeito, só muda a imagem, e hoje vou ensinar como faz isso, e disponibilizar algumas imagens personalizadas por MIM de outras cores para usar nesse tuto.

Antes de tudo, vou dar créditos a K.W que foi de onde eu achei esse tutorial.

Enfim.. pra começar você vai em Modelo> Editar HMTL e no teclado aperte

Ctrl+F

E pesquise pela tag

]]></b:skin>

Em cima dessa tag que você pesquisou 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;}

E aqui embaixo tá a explicação do código acima. ESSE NÃO É PRA COPIAR

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.

Depois de ter feito tudo, você salva.

Bom, agora a segunda parte é, você vai em Layout e adiciona um gadget HMTL/JavaScript

após ter adicionado o gadget cola nele:

<div class="boxdestaque">
<span class="title">SEU TITULO
<a class="destaque" href="SEU LINK"></a>
</span>
</div>

Repita esse codigo se quiser mais dessas caixinhas.

Não precisa explicar né, tá evidente.

Bom eu só mudei a cor das imagens, mas se você quiser fazer a sua própria imagem no photoscape, photofiltre ou photoshop esteja livre a suas modificações...

Essas imagens são fáceis de ser aplicada, é só substituir a URL do menu destaque lá em cima, pela url da imagem ok? Qualquer duvida só me perguntar aqui.