20.7.14

Menu esconde-esconde


Bom... Sem muito a dizer, acabei agora mesmo de nomear este menu e confesso que acho o nome terrível, mas a única coisa que me veio à cabeça é uma pessoa escondida - que neste caso é uma imagem em link, ligeiramente oculta no topo do blog - a ser encontrada, como no jogo das escondidinhas, ou como se diz no brasil, esconde-esconde. Daí o nome >.< 

Coloquei muitas abas, mas podem retirar ou acrescentar facilmente, repetindo o código padrão do gadget. A aparência é muito delicada, mas se acharem que conseguem mudar o modelo, estejam à vontade.



Prévia


Tutorial:

Abra o seu HTML. Dê CTRL+F e procure por:
<head>
Acima acrescente:
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'/>
Agora, procure por:
/b:skin
Acima acrescente:
.esconde {
background: url(http://4.bp.blogspot.com/-lW4Jd3VUYWY/VKmxtaNGYGI/AAAAAAAAbBI/wN_ZxyMWfPY/s1600/imgmenu1.png) no-repeat;
font-family: Short Stack;
font-size: 10px;
color: #dec3c5!important;
text-color: #dec3c5!important;
text-align: center;
text-shadow: 1px 1px 1px #fff;
width: 50px;
height: 60px;
overflow: hidden;
padding: 0px;
float: left;
margin: 2px;
-webkit-transition-duration: .5s;
}
.esconde:hover {
margin-top: 34px;
-webkit-transition-duration: .5s;
}
.esconde2 {
background: url(http://4.bp.blogspot.com/-PztyashUfBY/VKmxt1Q00AI/AAAAAAAAbBQ/u-rK564VaAM/s1600/imgmenu2.png) no-repeat;
font-family: Short Stack;
font-size: 10px;
color: #abc7cc!important;
text-color: #abc7cc!important;
text-align: center;
text-shadow: 1px 1px 1px #fff;
width: 50px;
height: 60px;
overflow: hidden;
padding: 0px;
float: left;
margin: 2px;
-webkit-transition-duration: .5s;
}
.esconde2:hover {
margin-top: 34px;
-webkit-transition-duration: .5s;
}
Agora, adicione um gadget, e dentro cole o seguinte código:
<div style="margin-left: 0px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde">
<a href="LINK">
<img src="http://1.bp.blogspot.com/-fKwbfhlUUwA/VKm0YTXchhI/AAAAAAAAbBo/ib5WlXdfZIU/s1600/imgmenuhome.png" />Home</a></div></div> 
<div style="margin-left: 60px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde2">
<a href="LINK">
<img src="http://1.bp.blogspot.com/-Ix0Tk6r1uJY/VKmyRhYeB4I/AAAAAAAAbBc/piWWP84tfbc/s1600/imgmenuabout.png" />About</a></div></div> 
<div style="margin-left: 120px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-EL6VsNNGKuc/VKrecFPwV1I/AAAAAAAAbDA/ItNql7X8Qsw/s1600/imgmenufaq.png" />Faq</a></div></div> 
<div style="margin-left: 180px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde2">
<a href="LINK">
<img src="http://3.bp.blogspot.com/-tqWm2LiiqkY/VKm0bwtW6EI/AAAAAAAAbCA/HMUVfnj6J0o/s1600/imgmenucreditos.png" />Cred</a></div></div> 
<div style="margin-left: 240px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-NCdVyWEP94A/VKrecrspRhI/AAAAAAAAbDE/W5KlH6Keum8/s1600/imgmenumapa.png" />Mapa</a></div></div> 
<div style="margin-left: 300px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde2">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-ZQriaL0L7pU/VKm0eLiZYAI/AAAAAAAAbCQ/byBhm3eP1nA/s1600/imgmenutags.png" />Tags</a></div></div> 
<div style="margin-left: 360px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde">
<a href="LINK">
<img src="http://1.bp.blogspot.com/-TdRnQ3uvWlA/VKm0epOZEyI/AAAAAAAAbCU/PD4HTejX70Q/s1600/imgmenuavisos.png" />Avisos</a></div></div> 
<div style="margin-left: 420px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde2">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-OsSaUit_N88/VKm0fgzbo8I/AAAAAAAAbCg/sYqYhtr7yuQ/s1600/imgmenulays.png" />Lays</a></div></div> 
<div style="margin-left: 480px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-OWYZXE52oT8/VKm0ie3ma0I/AAAAAAAAbCw/9A7DEQ0EsUo/s1600/imgmenuafi.png" />Afilia</a></div></div> 
<div style="margin-left: 540px; margin-top: -295px; margin-bottom: 0px; position: absolute;">
<div class="esconde2">
<a href="LINK">
<img src="http://2.bp.blogspot.com/-vwqHRfSEhB8/VKredbhfPDI/AAAAAAAAbDQ/Q95w2tRWSR8/s1600/imgmenucampanha.png" />Camp</a></div></div>
  • Certifique-se de que esse gadget fica em primeiro lugar! E que não tem título!
Era isto. Como já disse, não se esqueçam de fazer as alterações necessárias, como Links e imagens.

Ja nee ^^

Sem comentários:

Enviar um comentário