30/01/2013

Tutorial: Menu Destaque

||

Bom dia meus bunnys! Venho trazer um rapido 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. Caso queira ver o menu clique aqui:  Preview


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:


.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 codigo:

Imagem do botão: http://i1234.photobucket.com/albums/ff411/SweetLG/218.png  - Troque pela url de outro botão.
width: 64px; - A largura do botão.
height: 25px; - A altura do botão.
background: #eeecec; - Cor do fundo sem passar o mouse
background: #f6dce5;  - Cor do fundo ao passar o mouse. (Hover)
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)
color: #7797a7;  - Cor da letra ao passar o mouse.

Depois de tudo arrumado, salve! Então vá para layout e abra um novo 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>

Se você quiser mais caixinhas, repita todo o código, um abaixo do outro. Bom eu vou indo espero que vocês gostem, ate maos 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
    Respostas
    1. Que bom!
      Claro participo sim!

      Excluir
  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
    Respostas
    1. Jura? Ohh que maneiro \o/ Thanks

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

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram