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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-uQrePfqRWDUfh2tYDqeRYs-CyR_HeiImfaxBA23j_OoQ0NTsg1mLu0zR_5HFDyXd96cV7wvlZqXfFBhcvrRAYfGj4HIHakjkQVlLMYjLGvVZYpLnX3jr0-qKoUHA_Rkkogkj4RUi1E/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.