Menu Destaque

Bom dia meus bunnys! Venho trazer um rápido tutu pela manha, antes de ir ao trabalho. Eu achei ele um menu super legal, apesar de nunca ter usado aqui no blog. Ele e perfeito para para colocar redes sociais ou postagens de destaque, ele se chama "Menu Destaque", ele é bem bonito mesmo! E muito fácil de fazer e é divido em duas etapas, antes de mais nada quero dar os créditos, ao KW.

Brevia do efeito

1. Vamos agora como adicionar esse lindo menu em seu layout, vá até Editar HTML e então procure por ]]></b:skin>. Assim que o achar, acima dele adicione todo esse código:

Códigos

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

Agora vou explicar as partes principais do código:

◤Entendendo o código◥

• Imagem do botão: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4D7d7nSPU-OMRl2fhK_O9-rXGZ9digeF5ukMxMLW5ol9dFlOKABTFMwgFfpQMvJLpe0borT9FdlJKgqKAPKN816koYJl9AUE4OQCl5g1JUcFyFH4n64ZPUtvn2k8mTpRb93EZ7O0riE/s1600/218.png  - Troque pela url de outro botão.

• width: 64px; - A largura do botão.

• height: 25px; - A altura do botão.• Sobre o código aqui.

• background: #eeecec; - Cor do fundo sem passar o mouse

• background: #f6dce5;  - Cor do fundo ao passar o mouse. (Hover)

• color: #7797a7;  - Cor da letra 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. (está definida para itálico)

2. Depois de tudo arrumado, salve! Então vá para layout e abra um novo gadget de HTML/JavaScript e nele, cole:

Códigos

    <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. Bom eu vou indo espero que vocês gostem, ate mais tarde!