Otra variante del menú deslizante, por Ciudad Blogger ~ Mejora Tu Blogger

Ver ejemplo: http://ciudadblogger11.blogspot.mx/p/menu.html

Esta es una variante del Menú deslizante arriba del blog que habíamos visto antes y que a la mayoría le gusto por lo elegante que es y por lo útil que resulta para ahorrarnos espacio. Muchos habían pedido ese mismo menú pero a la inversa, es decir, que el menú se mostrara abajo del blog y que se abriera hacia arriba. Así que he cambiado las imágenes y modificado los estilos para tener el menú como algunos deseaban: abajo y flotante.
El menú sigue teniendo tres secciones, un área para que el lector se suscriba por correo, dos menús verticales, y un área de íconos sociales a los cuales se les ha agregado el de Google+.
Puedes verlo en este blog de pruebas.

Para poner este menú deslizante debajo de la página entra en la Edición HTML y después de<head> pega el siguiente script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(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>

Ahora antes de ]]></b:skin> pega los estilos:

/* Bottom 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/AVvXsEgFaFbXgAyzAJhjAMjAiyCvipjkwKRx7IRlW8bSo-jbZ-HIvMlgs_PRn7Oatt78U7FLFwhrNJPh52K8mPXpU83XGBxx_JyIejrLQ-d9zh28INxvbzrYorQtDRewPFpxie1l-ktFEZnAPgLn/s42/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
display:block;
}
.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/AVvXsEguaY_w2mUj8qSQHhil4WP4B8TqDWr74rQNoXfYd1H8EXYTRyaB48jpfLLyRa9335geA5bEctjGXy5GCJsPHv6DrAy-nFlKwH379YB85y2I8Tp8WIEPn8PPaNRrLdBoO9U2OO4Km5qAelge/s42/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/AVvXsEh5kmm5leaY_UO3BFSTUSfaBfv22RUhJ6U2mYr3dAe0vIu4YFUADMXyLCQlQNlPxyG7q8wyDAb1rsh7hcHJLtORwnGnLWBEM3Owky8ORFKY4WwyDiixlMYVHJ2SQXkRvHWt0lhj32U6-mGP/s42/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/AVvXsEgBPWm5KBAfagd6-jbHt2omCHdAx8YlyiiNhWP0Iyu0VC4nVOFnaFWY49nuGYWPsWl_5bqgOrOoWl37zIfGBcae4djCLQraRSPlFO4m8xccTPYYsF0sRahC5923F9Ty5W-IEta8aCmnndRc/s42/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/AVvXsEi1-RHkpcV9SwhELTBby_RKakSDrC1NalHbNpsa2-jwB3fg5j4D71G_fGhaCy3fEakWyOoMZ6K_ppzu9_bf6bOqFmQE9A641SHzicMlVmz38oxNBrBV-FZyzy2wHLBOx6m71Uxj2oWUkBH6/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJvCq9iZ39wsXK2O2_gQjpEtB0IBAuLTiZOiOwOV-ZtOx-HxChlPKhcMU1rNq8qfw0mCM_GEPaMvQaD9AQ4031vcW1ojRKH8vMB_wuuDYyq2qnwrgt7KlYCAYIcAxYnYG94sZXyFCCdDZ/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-RHkpcV9SwhELTBby_RKakSDrC1NalHbNpsa2-jwB3fg5j4D71G_fGhaCy3fEakWyOoMZ6K_ppzu9_bf6bOqFmQE9A641SHzicMlVmz38oxNBrBV-FZyzy2wHLBOx6m71Uxj2oWUkBH6/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJvCq9iZ39wsXK2O2_gQjpEtB0IBAuLTiZOiOwOV-ZtOx-HxChlPKhcMU1rNq8qfw0mCM_GEPaMvQaD9AQ4031vcW1ojRKH8vMB_wuuDYyq2qnwrgt7KlYCAYIcAxYnYG94sZXyFCCdDZ/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: fixed;
bottom: 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/AVvXsEiQPLboDZwr-AFHx8eqxXkuIDEOk-1UO04q9AMOLU37JrjAneAzM6s3QMCnmxuLxnKhXx2vramOYJJLIgIoU0QBlZ6YCe6ThUfB9ExvzScqJ_fphX4Dvk4UtPUgd8v8hfO_SmG02NrYPxh4/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/AVvXsEhV3rdgOj6ye4ZraovLkYR_fA0_4gH4xelkTIsPd1iGftZPwRL5pfS09a0NZAyzZ4fqb4PABTlHKrPjTHjFSXSWHd9lPm4uXN29ZapBAtA9ihYg7eyUk9RhZ6n6IViDcYovipiNLi1bz2n8/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;
}
body#layout #toppanel {display:none !important;}

Por último pega antes de </body> la estructura del menú:

<div id='toppanel'>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='javascript:void(0);' id='open'>Abrir menú</a>
<a class='close' href='javascript:void(0);' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>

<div id='panel'>
<div class='content clearfix'>


<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/AVvXsEh-_S9_e2hJeE9Q_hIsWbj5tMiwYSS3NLg5nkCSLZ2MOCS8xBIGJtYi2jzWHRvWmzp54cTjvGrH_CxWTe4ChESPzTXQYEMumWl4LvNDgzF9w_SzNxGFfNl8zrSgDFoYM8B1GzClrqqHpzwj/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/AVvXsEiquOvbrWr7vRN29cGpxvAxurgCCF5xAyacAS-7PZLbl_B4zUvcEzQZ0GzOmJkUHOtQodxtJ6RNm98fXkcz3qkJsptEqb6wnwAO1S8gyfu91z1RjRLriCGAl6W020loSiDR-hR17DGiLWhn/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/AVvXsEi7bzdUfuxv3FHRXHEOgOmCG07Em0qQm4fGxGMXnWThwKHzbXWrsWFPN67PITR2S01WNNclqQl7pGhNjGqvcodufOieGXtSD1CIJxamzpLJiNFDmoK-hp_MOmyiDxR4A-Tf5ZYZGqK4YvYV/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a> <a href='https://plus.google.com/b/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgsvB7msB-yr8R-VYIV5gXiZ0iUederYOSrSpxotGZxGT6fvohyphenhyphen9S2on-Lb7hyphenhyphendiYcGSdimJbCHfmoGLUWJpTmbYjnLXYiVaWW-hcCPt4emjWReRfQRrc3cYOE1gzMGg8_GUpEL_9eIcP/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></a>
</div>

</div>


<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>


<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>

En color verde he mercado donde inicia cada sección para que sea más fácil de identificar:

En la primera sección está el mensaje de bienvenida y los íconos de las redes sociales, en color naranja deberás agregar los IDs de usuario de tus cuentas. El primero es el nombre de tu blog (para el feed), el segundo el de Facebook, luego el de Twitter, y por último el de Google+.

En la segunda sección se encuentra el menú de categorías, qué bien puede ser utilizado para enlazar las etiquetas del blog, o cualquier otro enlace que queramos.

En la tercera sección se ubica la caja de suscripción por correo, recuerda que deberás tener habilitada la suscripción por correo en Feedburner para que puedas utilizarla; si ya lo tienes entonces agrega en la parte de color azul el nombre de tu feed.

Si quisieras cambiar el alto del menú cuando se expande podrás hacerlo donde dice en negrita
/* Alto del slide */

Lo que se asoma del menú son imágenes, por lo tanto, si quisieras cambiar el color tendrás que editar todas las imágenes y después cambiar el color de fondo en background: #272727;

El menú usa jQuery, así que recuerda tener sólo una versión de esta librería. Si estuvieras usando Scriptaculous o Mootools tendrás que aplicar un parche para que éste sea compatible.

Y eso es todo, a disfrutar de este elegante menú debajo del blog.
Enlace:http://ciudadblogger.com/2012/03/menu-deslizante-abajo-del-blog.html

1 comentarios:

Anónimo22 de agosto de 2016, 15:25
Hola, podrías ayudarme coloque el menú pero los iconos de las redes sociales se ven muy grandes, le paso la dirección para que lo revise: http://365clasificados.blogspot.com espero su ayuda y gracias :)
ResponderEliminar
Respuestas

Añadir comentario

¡Gracias por comentar!

Mejora Tu Blogger