Blogging Tips: Men? deslizante abajo del blog

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/AVvXsEgpA7mEvcxzkmjWsDFndB6vut5rbNnkj_hLxLebIq3oy_J39fjNIthW_MmA25y_AJxxr41NjUJEFV-QpV8R5IBCb8sfLZ9wlrWAegtEms7Ht7DvwdN1tKLon7FCxZ3nct3AjMXcKzJdhsXX/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/AVvXsEjDAiTAqdjss0pm26GZGmjzIGzTBek03JUrCZK9CsWvkTVdK2odkx4whtFYrzqVsG8nAEwfY1E9chHiz1LHkkTfjYSBAJ6A92gyoz7_Vp3BtcqxSgHBRABQ-p_8FtKlR4nkxu5qAGOUZgKX/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/AVvXsEirwi-X1E_gKDMaI-QNiIoESZFnaxIWWljf6MGBQnDS-aMFD0QGsZp_nuI6bD1EQANlzkm7hcQe4TFIsAPQBmCMb8DOZ_PtLb3mrOgz7zync5rsRkLJm_NFoPz08oEy7slk0wgbpQfojKOr/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/AVvXsEhcNrc5xy1SkUSy_ip8NjMniu7gcfCPnjVxRqHHoJ4L5K4ZkylgU6K9TDj-GlGd9_c-kxL4i4B9cSG2WJHgA1ItFplnyDTmZwfpbubTgxZFuMCOSed2RnWQcVy-SO6Bl9mGw49JPu7iKcM7/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/AVvXsEhGWoCkanEJNf8Mja1vCyGpNumIJrbisr8rCoKPi_iut_-lXc845H263eJXfixcuPK6ZpdwQSsZXXuU1_AwF6RmdIOeC1LB7ZONmJagXtsnqQXwldAWv5XFUqtuON5U_cAtBvW-AMXTI49E/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfViWZONkZZ_yBnFcTxl9oaJdm0ufKrk-_i3KLz2dKS81m4GqErBw_quicom4Dgt3fwVcRVxm4RKQ56S_jCFbAJ6TsFEWUwqJpdfBPxyH4kBgMq6P1dOamSJ2mbLF3zxPsezQvFXZx66e/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWoCkanEJNf8Mja1vCyGpNumIJrbisr8rCoKPi_iut_-lXc845H263eJXfixcuPK6ZpdwQSsZXXuU1_AwF6RmdIOeC1LB7ZONmJagXtsnqQXwldAWv5XFUqtuON5U_cAtBvW-AMXTI49E/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfViWZONkZZ_yBnFcTxl9oaJdm0ufKrk-_i3KLz2dKS81m4GqErBw_quicom4Dgt3fwVcRVxm4RKQ56S_jCFbAJ6TsFEWUwqJpdfBPxyH4kBgMq6P1dOamSJ2mbLF3zxPsezQvFXZx66e/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/AVvXsEhXWm2fO93hkP6520NwamIm_xe1DICSElWr6yOuyEcnYPhoObc95f0bpSFE4WSqNbo6P2OwImNnXGkEiuzhVaMlHSfwnnlEGcl6mt7SnRzE_PZWNRCkr2KVw516oktpTVmRHpXAK4X8ra2g/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/AVvXsEhbwQ0kcCOR0aUMRZUTvVGMA5o19cHZch3ub5kx98maYAhkkgnCELR2r5dyOoSj8beNZMEy32GUMi_dD_8uIVIGk3IPSjfGnbFKYEJC6WQUQQJsc67m5yl87-H7dzl6muTB7kqOvvBKd-tE/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/AVvXsEhGo9OsDlZS5nntsQgTp6WGw6Gj3vLchp4WT4JkbN_OTR2szzVkZsJCfc26UumAoTLqsXf7RH5vwdDbR3sflyqn1944LWsPoz8uwdAvin8VCiWeGuA3P5NYUp4jIwMfOj88jR_4U-HEA37S/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/AVvXsEg-VEqTHYQZ93bPjJr3qAtZTnTw9botLP-l39xq9s0He85mhG-RYQ-8lxiJJBP81jUIIDSjNpvmoFvlvbXmrKQ-_JR9Hwz3LTOksq2oDOTUU7Q58DzJlMYgfhcD1HrwlcDB7ZYxaAT4YeNp/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/AVvXsEhHCiXMOxUlbHx0exXsBeE7HzQlxNsUwMMF89XObi4xZ4wBdPoGskG7BtGtY76VLCKMPhF8hypaJI39rnJj1kS-KheGfmdzw0dNHhZe1NXqIVADBbR-NM4phc09F-oZug3BMexjN46LqeEv/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/AVvXsEhqQYdKk_uL9T4yF-3fHRF-8D5KgoZY7J3AYtg8XMLMynio4fiHslCGTjjpGVlF4940bqjwXby86T7N0LmGfxRMgCnzFVU6KNS9850AXU-h6w5XSJP8zgKou7gRctYlealDRSs2hBWraK64/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.

Blogging Tips

Wednesday, March 14, 2012

Men? deslizante abajo del blog

No comments:

Post a Comment