Equipe

18 dezembro 2012

Menu abinhas



Oi pessoal, que bom que vocês estão gostando da reforma do Let's Go, que hoje, se chama Creat HTML, mas enfim, eu criei um menu bem fofo que eu chamo de menus de abinhas, por que me lembra as abas do navegador, ele fica bom se você por ele em cima do gif ou foto do gadget sobre, para visualizar clique aqui. Se você gostou do resultado, clica em Let's Go para saber como personalizado, então enjoy.


1- Vá no seu HTML (Blogger-> Modelo-> Editar HTML). Procure por </b:skin> e cole isso antes dessa tag:

/*** MENU POR: GABYL | CREAT HTML | LETSGOFICIAL.BLOGSPOT.COM | NAO TIRE OS CREDITOS ***/
.menuabinhas {
background-color:#E8E8E8; /* Cor do fundo do seu menu */
display: inline-block; /* Não Mexa aqui /*
text-align: center; /* Alinhamento do texto */
color:#CD7054; /* Cor da letra*
float: center; /* Alinhamento do menu */
margin:1px; /*Não mexa*/
font: 16px '; /* Tamanho da fonte*/
text-transform:uppercase; /* Não mexa*/
padding:1px; /* Não mexa*/
border-right: 04px /* Não mexa*/
solid #87CEFA; /* Cor da borda */
height:16px; /* Não mexa*/
width:60px; /* Não mexa*/
box-shadow: 0 0px 0px #eee;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px; /* bordas redondas */
 font-family: 'Arial' /*fonte do seu menu */;}/* Não mexa*/
.menuabinhas:hover {
cursor:auto; /* Não mexa*/
background-color:#E8E8E8; /* Cor do background em hover */
border-right: 4px solid ;  #FF6EB4 /* Cor da borda hover. */
-webkit-transition-duration: 0.8s; /* Não mexa*/width:60px;
 -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;/* Não mexa*
font-family: 'Arial'; /* Não mexa*/
font-weight: normal; /* Não mexa*/font-style: normal;}
/
/*** MENU POR: GABYL | CREAT HTML | LETSGOFICIAL.BLOGSPOT.COM | NAO TIRE OS CREDITOS ***/
Para editar:

O que mais caracteriza esse menu são as bordas, então edite essa parte para mudar a cor dela:

Dê o ctrl+f e procure por: solid #87CEFA; /* Cor da borda */ troque o #87ceefa pela cor que você deseja.

Para editar o hover:

Dê o ctrl+f e procure por:  #FF6EB4 /* Cor da borda hover. */ e edite a cor assim como o de cima *-*

2- Vá em layout-> adicionar um gadget -> Html/JavaScript e cole esse código:

<a href="http://www.blogger.com/SEULINK" class="menuabinhas">nome do link</a>
<a href="http://www.blogger.com/SEULINK" class="menuabinhas">nome do link</a> 
<a href="http://www.blogger.com/SEULINK" class="menuabinhas">nome do link</a>
<center><img height="151" src="http://media.tumblr.com/tumblr_m9yyno5hAU1rrjuvt.gif" width="270" /></center>


Entendendo:

Troque o http://www.blogger.com/SEULINK pelo link que deseja.
Troque Nome do seu link pelo nome que você deseja que apareça!

Essa parte: <center><img height="151" src="http://1.bp.blogspot.com/-I-uyFRoO-mI/UARGwBEO-HI/AAAAAAAAA2c/lIYhbHDJRjU/s1600/tumblr_m5fl2ahLSI1rxrgs4o1_250.gif" width="270" /></center> é onde tem o gif, troque o link do gif por outro que deseja ou apague essa parte caso você não queria por gir ou foto,porém esse menu fica mais bonitinho assim.

Espero que gostem, se usar credite! Desculpe se o menu ficou feio,não sou especialista nem nada,mas enfim *-*. Até a próxima.

2 comentários:

  1. Amei o resultado! *--*
    Um dia desses eu vou tentar no meu blog! :D

    Beijos--->milena-modaeglitter.blogspot.com.br

    ResponderExcluir
  2. Haha que bom que gostou Milena *-*

    XxGaby ADM

    ResponderExcluir

Seguindo,Segue de volta? Não! Eu quero leitores, e NÃO números, então esse tipo de comentário será mais ignorado que o orkut aqui!

Aceita afiliação? Se tiver vagas sim , caso contrário não! Mas temos as seguintes regras: Layout bom e organizado, estar seguindo o blog, comentar sempre aqui, e ter mais de 200 seguidores

Retribui meu comentário? Claro, por que não? Deixe seu link no final da postagem

Me ensina isso? Sim, peça e postaremos

Aceitamos criticas, porém, crie criticas com ARGUMENTOS não com ofensas do tipo "Odiei o blog" isso não é argumento, isso é desculpa de pessoa mimadinha

LAYOUT FEITO POR GABRIELY MEIRELES NÃO COPIE OU SE INSPIRE.TECNOLOGIA DO BLOGGER