LO ÚLTIMO

Crear menú de pie de página para Blogger

Este menú esta ubicado en la parte inferior de la página web conocida como "menús de pie de página" o "menús de navegación secundaria".

Para poner este menú deslizante debajo de la página entra en la Edición HTML, busca: <head> y 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: &quot;.&quot;;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/AVvXsEh4LJylV4stIoE0zTOopnx2t-dAX49opr7gV8sxvAwoUeA-sqOH49wd9Z5fZvt2LH5Ry33_S0nV8yap9M0uT9XMot5RDtT2QgPNC6hdGQcfI6I0MPe0uSodbcd7GnERGf2fOkJAOMJGfPtU/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/AVvXsEgnJ7hjvRavm5sC90tLaOPJzcZzBww63_7j4zYlO0i6EQN8FjF3KXhiY1jWgESU2ihPq3u2zza5HMZINKd88ZFWnUjb6lcM790IGqCVEUpnkTSk3PkyWdaNRFe1z_XWyVY8S4ceNTVJvprD/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/AVvXsEj1i60Xx9hMz9VMkMb7diEc7B7NW5EtjQLe59Y64kw-JRuU-0DUmWdx5jR2LlWQb2kb1At8TqcC_orOPq8sR1uHSl_10MyLLHzfwZ0pWZt-trxHFJEgD0xHeZ_SV16RQvWCeRsvFNGytCed/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/AVvXsEiLMm0gKLOvxtHM0025ksYbggxBhmRHJtyBU5ihl1Z9eJB_3sxqe4nTufc-JHTUUjlvmLOOpRmbflMWS3qCvRXWdEYwB9vWtznZkDCTCqyMglqW1wK0aY0pKULu2oPqjC1G0mdnnaz03x4L/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/AVvXsEjWpMz6pck7w8CHIPlWgAUjvS2fZgWnp_znQH4LNLZS0jfDCFkjhPdnIj7gb7Gr_Wr0FmdUDUf7BG-dYDzTx4n6gU9fl4OnRcmFrP4n6bdQFP6BmHtXCoO3-nvrOCuMEZU4zxJa1250KfJ0/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyeXgiHUcBvW8CBrjbrTs67ORB8dIWbdQUni_83nXtXzaFhyphenhyphenyspWXmNxOYVBwaUatbW0_WapeOgEcLlVXbzCcuGqrS1DU9yFnrYeeiva88LQJ-v-aLBh1bbuj1-NiUL0vI5CkSMX0x0r6/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpMz6pck7w8CHIPlWgAUjvS2fZgWnp_znQH4LNLZS0jfDCFkjhPdnIj7gb7Gr_Wr0FmdUDUf7BG-dYDzTx4n6gU9fl4OnRcmFrP4n6bdQFP6BmHtXCoO3-nvrOCuMEZU4zxJa1250KfJ0/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyeXgiHUcBvW8CBrjbrTs67ORB8dIWbdQUni_83nXtXzaFhyphenhyphenyspWXmNxOYVBwaUatbW0_WapeOgEcLlVXbzCcuGqrS1DU9yFnrYeeiva88LQJ-v-aLBh1bbuj1-NiUL0vI5CkSMX0x0r6/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/AVvXsEh0uctqKuTHyPvo5kktucasWxp7wK-9tzQ_B-s3mW8athVBlIhFrZ87PQ_tbk8KppcM13f8ceLPWaJjB0I0Jf9xj9V_Makxvee7Uwc6i3dAcKEwawAKAI65nKRXn8hr8WqkixEazePo00lt/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/AVvXsEiin9w_9c0KRb8iADDYkh5855VnYp9hUHuYfWOZTAugvADVUKasTFzwJ48MG6BTmW4hhkP6ozoHbxPvZiyLiO_fmVrIF_76Imk7hylkKfykKgH5hgv6GAoHR7Ggqd-1K_uVBlCBWLphkt7D/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ú:

<!-- Inicio bottom sliding menu -->
<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'>

<!-- 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/AVvXsEhNNo76bCjfRYJVJP6LjEuyKj1q5fsnCMSr91RGaE-QGvcYTcNkYndwh0S6eSGI0Ic341o7LPwK_c6ji1bWEkgAZ3NqYNw7yTDvuwTdwC9lba3Du_mawBtxbIYEeexpvx4yTDECzUsKxmGO/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/AVvXsEjg4J6SZCNGHQj2etx20aZHWj1VqHIXuqy45WGpqoA7uTxDnRA1kqkYw3dG5wLjKVbdyf-DN6moEVoeBVd4bn1GvoqhSR23Q4uGYdj4qdvyw-NrvXo0dlPfk0LPOiFLu39VgxHpUkFZ04EF/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/AVvXsEg1u1r-_ioGQMW_abtXh996cm7wbfxt8S6FmIajpqQY4gTr8NfCIFuKA10xvtAOzy3jRAVUMD4OvfUnug78Fy_Q4pf8n4AeHLz-3CwpRsg9uoeO2HI7u6-xiBaOTooFMG0VWY09G6bhXmSJ/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/AVvXsEjpFfa4Aue3VHGnXebh0YTFC69geEOLZF8VpG8RCNL_99u012YyUJsQvUgLy0sVIQ4Q0dxqhOlmZPJYM2CM89nx2Jrs79KtdwUt7Rj48xyOTmPXU3u4YdS3hzME1WWNgBjh-Vzi8RuynvpF/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></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>&#161;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>
<!-- Fin bottom sliding menu -->
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.
Labels: , , , , , , , ,

Hola, Bienvenido a mi blog!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Categorías

¡Visitanos!

▶Pagina Web (Se sube archivos y aportes Diariamente)

https://rebrand.ly/BrayanRockerWeb

▶Facebook Personal

https://rebrand.ly/FacebookBrayanRocker

https://rebrand.ly/Tublogcristiano

https://rebrand.ly/FacebookPacksPorMega

▶Cuenta en Youtube

https://rebrand.ly/BrayanRockerYoutube

https://rebrand.ly/PeliculasDeVideoJuegos

▶TikTok

https://rebrand.ly/TikTok-BrayanRocker