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:
Agora, adicione um gadget, e dentro cole o seguinte código:
.esconde {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9OIW6YaTvFX4ejCTCVP59YcHttjOdf7ocw4QVY877ypVgQzBPSymZrM-vHS7zNdjomkOm-iRLYWZoEOAJfpBlA4sgeMahbH-QoibfN8Xxwj2APMlAZRkDK28G_l0ytdhCxGlk6E2vGcCK/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPiRoCJYxeRlxutPk1TasCU8ZCbdxG3kr1rMwWEe6mCo332YxLUtHlfj-jl5umyLCBUogA-H4PV0xLj5vRVMjmEQfOzH0C-HY4Z-2kgDmihYKXq-4h2UweiyE0vvSAVRKogaPW3I8hcTE/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;
}
<div style="margin-left: 0px; margin-top: -295px; margin-bottom: 0px; position: absolute;"><div class="esconde"><a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJUIjzLxb_n7drl52jUtbktClgdDy1MtAdUk5clHQnwwfGYJsVY6WnXG1oahXo1hi4DQ6Uw3DhdLWOj-Uhn6QGrWZrPWhl-P1QopfZzrp9z8swS8OJSdq1jnvBpNAFvIj5bT2ylEOcfs9B/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATSsOvzfevKnPhVou9sC1nUi-UFJAGb8FRslcmacm4jWsyM64uaM0jAWgqM1JP_NB1b4Kr4hMR53ylo04yPzX1bF5RQIZPYB5Ke27jplcEKZkqvz-F53P7OCet0XD3_MJ376caMzro_HG/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKjH4GLdIiE7aOJzhKYCZlAPnhfZD9Reg_RgcSEGcmNY0AHXsp_2WEOjLE1ZJcaRvYM6zpSCfKrvSEli3FfZegmBcatkd8HhH5ZIDkVLVCuZlvt5pVRpZr4CEkp9Ai5yPnND4KbGiOxNG/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0rXRDF6ViqJPwbBxRGJMGvaVN3xv_hD5bvv9KjdGxB3jElaNmv7a9oOheXfoK9RCD6Zyyk4gPTB6oztRNJ1D-edCHZWNcZmKPwS_QXE6JWw1f8bqgICIYqn3VGP02jeYtBDqg6K2_9NM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIgNSelN2GUmZFc5CtmyPw-aTs-UQp1BEpbfHKmk9qLjblKewQSOGbBImJP0Lb2xWWZ0I1vo7SfV_64Kng2joRcae4wvZJF0sArJ1wRO1f6-PcRe8-KGMwZqbwdqnyMqPbA5tSKm96VfSn/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIF5yzAA9IrzDoOHC5lCgejS8c9MAS57zr_UlLESNy1Ai8UCSntsyyxvk6DVEaC_jmFrJFI0gY1STInwuEUAaZrjI4p9goxS89rUPQDWilgcIw2-l0bydHtJbfGcKKFHzmqKBIWsFab7W3/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnWwclfcjXzID72NGrNCme69gmEt9zRh_DoMqrtuMPElHpquCxmOvas8vLZjp81K3QAD427bFVq7JpWv2Ymd71yzItkK7rpoNRcPVBlS55A9AgM4ADBcaM6A5KLuI2_rB4P2G-qw9-Z5S/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS195CQQvjM_S64jNTglw5DXejGsjJN4cR5_fubS8sL2-yqmPKj5vvfihQ_evZW2jzqO3-BGXJBrz1HSaqF4OZo-_s1Pn6Q0N9NKpOGCs0RIg11V6HiEA5Zt7mMjolFVFCfG665rx3U7kE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQ2IATI5ugYoLzEuDOgS9fq1-Wjc6UnZKkhZsIFRW-N37ZSStLYz8vJAwscMZjtdXe-PG3yVBA0vt9fDlRYi59xA9aqhyKT8Z0V0p74dcTsiLXdEPDnKxxihB6pTB5ZczYM-c4eRKVmX2/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnQDY56rJrgMEDxoKAOZqBMVTIU_hSnGEzXuI9AFVKTtzhJsdHlLiojI4dAyexKrB4dMzhgmN4wXY0aPVtzv1hP1B795ytcUIZNUBWVMNKOMXSHNouJJ1I3w6E9MKKtk0x-gUiQNclK5v9/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