30/01/2013

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.


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://4.bp.blogspot.com/-zYodYWXXuTY/XAIxw3mlkGI/AAAAAAAAp24/r_Hvheh-i_IcCfv6DduLwXSORcewxgXhgCLcBGAs/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!

10 comentários:

  1. Esse menu é bem lindinho! <3

    Kissus
    gotas-de-fofura.blogspot.com

    ResponderExcluir
  2. Que lindo esse menu! amei, ps: tem um joguinho lá no meu blog, participa?bjs ;*

    http://juventudedamoda-br.blogspot.com.br/2013/01/joguinho-valendo-divulgacao.html

    ResponderExcluir
  3. Oi.. Então. Meu blog tá começando agora. E eu e minhas postadoras estamos tentando divulgar ao máximo. E eu vi aqui nas regrinhas que voc segue se a gente seguir antes ^-^ Eu e minhas postadoras já estamos fazendo isso. E pedimos MUITO pra que você nos ajude a divulgar.
    http://soqnunca.blogspot.com.br/

    Obrigada :3

    ResponderExcluir
    Respostas
    1. Ohayo Gabbi sim eu retribui sera um prazer seguir e conhecer seu blog.

      Excluir
  4. Drw!!!
    Você ganho o joguinho!!!
    Você já esta no divugação ♥
    Beijo e uma otima tarde.

    ResponderExcluir
  5. Esse menu é bem legal,gostei do tuto.Já havia visto,mas foi bom revelo.
    Visita>>> http://barbieseumundopink.blogspot.com.br/

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345