Menu Tabs - Tipo I

 

Boa tarde, pessoal.

Me pediram para passar um código de um menu lá do tumblr para blogger e não achei má a ideia. Tem um tempinho que não trago nenhum tipo de menu para vocês usarem. O menu se chama "Tabs" e é lá do Things to help you, então não venham para cá me chamar de plagiadora, por favor. Claro que se você usar este tutorial ou se decidir repassar, precisa creditar. Não foi difícil transformar, só complica mesmo a parte de explicar para vocês.

Acho o menu super lindo, bem simples. Para quem tem um template bem trabalhado e não quer lotar ele de coisas, este seria o ideal. Espero que entendam a minha explicação em relação ao menu e sintam-se livres para adicionar qualquer informação que eu tenha esquecido ou tirar alguma dúvida.

1. Vá até editar HTML e procure por ]]></b:skin>, acima da tag, cole:

#nav {

font-family: Georgia, cursive; 

text-transform: uppercase; 

width: 60px; 

height: 20px;  

background: #dda4c4; 

padding: 5px; 

text-align: center;

 margin: 10px; 

align: left; 

font-size: 20px;

 font-weight: none; 

margin-bottom: 3px;

 float: left; 

cursor: hand;

 -webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

transition: all 1s ease; border-radius: 3px;

 line-height: 20px;

}

#nav a{

color: #ffffff;

}

#ops {

background: transparent; 

color: #ae539a; 

width: 80px; 

font-family: Georgia; 

font-size: 18px; 

text-align: center; 

margin-top: 10px; 

text-transform: none; 

opacity: 0;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

}

#nav:hover #ops {

opacity: 1;  

-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;

}

/*

     FILE ARCHIVED ON 04:26:34 Jan 01, 2020 AND RETRIEVED FROM THE

     INTERNET ARCHIVE ON 18:33:42 May 09, 2024.

     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.

     SECTION 108(a)(3)).

*/

/*

playback timings (ms):

  captures_list: 0.731

  exclusion.robots: 0.085

  exclusion.robots.policy: 0.076

  esindex: 0.011

  cdx.remote: 19.378

  LoadShardBlock: 55.365 (3)

  PetaboxLoader3.datanode: 49.071 (4)

  load_resource: 57.445

  PetaboxLoader3.resolve: 51.741

*/

 Caso precise da explicação do código, siga a imagem neste link. Nela, estão explicadas as partes mais importantes.

2. Depois de editar como desejar, salve. Em um gadget de HTML/JavaScript, cole o seguinte para usar:

<div id="nav">

<a href="link"> 01 <div id="ops">  Home </div></a></div>

É só ir repetindo várias vezes para aparecer mais caixinhas. Conseguiram?