Muchas veces cuando pensamos en hacer un blog, se nos viene a la mente ponerle muchos gadgets, pero hay un problema... que el blog no cuenta con el espacio suficiente para agregar algunos de ellos. Así que en esos momentos una buena y elegante opción es un menú plegable y que quede oculto y que aparezca solo cuando el usuario lo desee.
¿Como se ve? He aqui la muestra en este blog de pruebas solo abre el menú de arriba para verlo.
Para añadirlo nos vamos a la Edicion HTML de vuestro blog y con CTRL+F buscamos la etiqueta <head> y después pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>
Ahora agregaremos los estilos CSS antes del ]]></b:skin>
/* Top Sliding Menu
----------------------------------------------- */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}
.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOQai9kv8Z4yAM0nMqtWoK1rgPDD8DvKBaBy3lZapMLVMaoTBEmBQBhs9_F-zAZH2j2zp0s5JDkO9-CpBSKkKIZN36VGBKAMQm0c8DEWTC15CnkhN-BNiUHWnPDogQFHfDYYlSFBBqV-ij/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_P-BtHD0dqpLdf8wtaHJuU3hKFJ5WSGv0vP-2MY3hT4gaYGn3-nW6qCGObR8Le9Z1iH3CB6cgr6QTBHpY3G0drPZ0dJQqpcqzxFS40HxRwOrnv3hmqe_UMLO_FjCBFZoCUYROh9E7xC_/s1600/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28l-BvbnA0EqRTKWvvTCcUCp1mqCXUg8w6dFo8nuilSMKzKdrYrP8uJo0diydHDgCN7QqXfEA05JRHEa1Y4eSjwUMkMaYrzYSuDFRHOGLL68k_gd-zuuTes8wlJIxIDH-IWefckxZTikl/s1600/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3cfTFO_QnamkNiaeFeW54d3Be4rp_LlI_p2RaiTJg4kp6tIUHNnGO622PzisnUqQ5xKQfdxraqeL4f2vLeonKpsjBHZfEHImBNipouqPzwF1gMjlk7CMi4PmDaOECZ5jOAVwHn25-8oYO/s1600/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTNohtmdQ9VyXYMxW8kiz-iiN8q5L0SPgMjLzaQNy30DvkFXa4LCYauvjAZs7T8cSOrlS3dQRgal9qsmOyasf40H_kAoF_4TcXKouV_SyYukwCiXzn1itTikjYM_rEz5wnmUaxVCtbYOV/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3oUxdpqEw5ml0v8XY5zo3rDBQowuO3I1Q5IOPET7k0mmbFut3o969NcnaOnF1kHUevofACmp1LKVM5d-bu4mECaK1VPe-z356mUEJCcvK8xEQOQd8D2Bb7EIgbH7xxQngS9oWnB3_0hM/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTNohtmdQ9VyXYMxW8kiz-iiN8q5L0SPgMjLzaQNy30DvkFXa4LCYauvjAZs7T8cSOrlS3dQRgal9qsmOyasf40H_kAoF_4TcXKouV_SyYukwCiXzn1itTikjYM_rEz5wnmUaxVCtbYOV/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3oUxdpqEw5ml0v8XY5zo3rDBQowuO3I1Q5IOPET7k0mmbFut3o969NcnaOnF1kHUevofACmp1LKVM5d-bu4mECaK1VPe-z356mUEJCcvK8xEQOQd8D2Bb7EIgbH7xxQngS9oWnB3_0hM/s1600/bt_close.png) no-repeat left -19px;}
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5870Rc-W3_otQthwvCqwHzxsj45SR0hedr-ThQZJHC6ScOYViKn06viSbQcF2Sch5wBCV7PArESZ9IyShUCIlfFogP2zwHSvA1I0C1GQlnA4ObtGzjUa6ZT8O0GkSfilzpWaeboLzFx-P/s1600/bt_register.png) no-repeat 0 0;
}
#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXI7t1VDBgX7CpkHdoy3HPzT7MmgByeT1ckMGu0qBmC2QY-hnP4Iu6eoC1HsxLOQQ0ZGPTSkBKPDUs4VvY7sg80b-ECkLsmSBROXgNhxIQj6HslmPj-trtEVTb59wQkYZB5Bfs3g4B0OO6/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}
Por ultimo vamos a colocar la estructura, pega después del <body> lo siguiente:
<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<!-- Primera sección -->
<div class='left' style='width:240px !important'>
<h4>Hola, Bienvenido a mi blog!</h4>
<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>
<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCO9aFOWz32COq5DflTOeG9zVNRep7RcUPwarUO8yw7ZUcF9JlDN_QvyYF_XhalKEJtGPNxcGsLp5xiwMOzrQhyqbER-o8FeSq6HoVgJ-UAr_N7btH8wH4XrC-jAxYaALJEarBOdZRoA9/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmcE0BWqdja-gqgtSddEKhVL_bhUXylVfDUfCOnsVKeJW71yHnfmmK4ObD_7_OQjRP45EioscNN4j01ZJyuZXLEYvhuSA6QfnunFUXDCmirjuonf6TK-5g3I1_SEFGO4g1jAnoCrByPGX/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqUyQjyBbBVP_fMQj6-hVOPIB2lPF-Br5JhbPs4MxZEjpISG-YB1f15hz6xZpL6vKl8nwhgD91Uj_jrCQaIvbMYvC3dC6zrRbkn3Uzx6-BIo8ThwqvcVh2PtAj0DLjLKiSs5xP9Q1oeHq3/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>
</div>
<!-- Segunda sección -->
<div class='left' style='width:320px !important'>
<h4>Categorías</h4>
<div id='slide-menu'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>
<div id='slide-menu2'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>
</div>
<!-- Tercera sección -->
<div class='left right'>
<h4>¡Suscríbete a nuestro blog!</h4>
<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribir'/></form>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir menú</a>
<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->
Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces el código anterior deberás pegarlo después de:
Por último y no menos importante, recuerda que este menú usa jQuery así que si en tu plantilla estás usando Scriptaculous, Prototype o Mootools entonces no te funcionará.
Truco creado por El potro
<body expr:class='"loading" + data:blog.mobileClass'>
Ahora bien, esta última parte que hemos agregado es lo que contiene todo lo que se oculta y despliega. Lo que está en color verde son los nombres de cada sección para que les sea más fácil reconocerlas.
En la primera sección puedes cambiar el mensaje de bienvenida; seguido de él están los iconos de las redes sociales, sólo cambia lo que está en color naranja por tu nombre de usuario ya sea de Facebook, Twitter y el nombre de tu blog.
En la segunda sección está el menú de categorías que hemos agregado, basta con poner las URLs de los enlaces y los nombres de los enlaces que hemos añadido al menú.
Y en la tercera sección está la suscripción por correo electrónico, recuerda que debes tener habilitada esa opción en Feedburner. Y ya habilitada sólo hay que poner donde se indica en color azul el nombre del feed que tenemos.
Y listo. Básicamente esas son las áreas importantes que podemos personalizar, aunque por supuesto podemos quitar algo de eso para pegar alguna otra cosa.
El alto de todo el contenedor se cambia donde dice /* Alto del slide */, esto es sólo por si queremos ajustar otra medida.
Y como seguramente muchos querrán cambiar el color de una vez aclaro que son muchas imágenes así que para hacerlo tendrán que editar cada imagen que vean en los estilos y después cambiar el color en background: #272727;
El alto de todo el contenedor se cambia donde dice /* Alto del slide */, esto es sólo por si queremos ajustar otra medida.
Y como seguramente muchos querrán cambiar el color de una vez aclaro que son muchas imágenes así que para hacerlo tendrán que editar cada imagen que vean en los estilos y después cambiar el color en background: #272727;
Por último y no menos importante, recuerda que este menú usa jQuery así que si en tu plantilla estás usando Scriptaculous, Prototype o Mootools entonces no te funcionará.
Truco creado por El potro
