Blogging Tips: January 2011

Muchas veces cuando pensamos en hacer un blog se nos viene a la mente ponerle muchos gadgets aunque muchos de ellos no sean necesarios, o tal vez s?. Pero lo cierto es que en ocasiones lo que menos disponemos es de espacio suficiente para agregar algunos de ellos. As? que en esos momentos una buena y elegante opci?n es usar un men? plegable que quede oculto y que aparezca s?lo cuando el usuario desee.

Originalmente este artilugio llamado Sliding login panel es un slide para que los usuarios se registren a determinado sitio, pero como ya sabemos, en Blogger no se puede crear un registro de usuarios al blog, pero eso no significa que no podamos sacarle partido a este artilugio y usarlo para agregar en �l otros elementos como un men? y un acceso de registro al feed.

?Que c?mo se ve? He aqu? la muestra en este blog de pruebas, s?lo abre el men? de arriba para verlo.

Este men? deslizante est? hecho con jQuery, as? que lo primero que haremos ser? agregar el script; eso lo hacemos pegando despu�s de <head> 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 de ]]></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/AVvXsEgqoz9DHNkndabD5e56RRQNOZIk99mGAb9jv1jPJ9D2dFaVjabDeLtx81xch0RS5Je8AZFnm7yrlf1kKMwa6CJrR64O9YKLT5D0wKUpmoZ1yPtwefo_FXYWG50FfYwMMMFspUWhYxkr6p0e/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/AVvXsEg9mDSi3jBgeURzF4ufc8QMv8U6jPq42gimAs9jwqbIQBuGs3iqvCcnDD5AgDHSpjODT7KEAtzI-Y0jNJs9qX9sxkUXzfvw3UAScDPUBIhnlAbJnDqGU7AS9bMmZ68XWg3HqQ4Y8Y4pHpW5/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/AVvXsEgxEGjWCEjD_cnPeME1sn2tU_2yPeErh27dD8-64Rt6ogPe0ma46LML8qjVb-bOdvaL7BCb5jdxqm5_QBd5aZ1m3yPcqY2f51clkUZ-a6t-NlYPk5uO4y9Ie3K0vzJUGybR3T-sZULg1Rkv/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/AVvXsEjNldqYiVHAE3Vc1K9azWk_IFwNfSK7Sxz-MvLx2RyqCtVMoRX5qOoTpnUjyzmYvnZIUyadLrdNwrfOYUS6ljgTKf7Ff8T3PAT4Az6-wxw1leRR4MUhv2dL6XD9aOTkSB9zsK3jKDEl2Knh/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/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: 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/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;
}

Y por ?ltimo vamos a colocar la estructura, as? que justo despu�s de <body> agrega lo siguiente:

<div id='toppanel'>
<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>
</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 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>

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:

<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. He puesto en color verde 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;

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

Ahora s?, a disfrutar de este elegante men? con efecto deslizante, que por cierto, lucir? mejor si tenemos oculta la navbar.

Sitio del autor | Web-Kreation

Cuando nos proponemos personalizar el blog nos damos cuenta que hay archivos que necesitamos subir a la red tales como scripts, im?genes, objetos swf, etc., y nos rompemos la cabeza buscando un hosting decente y gratuito que nos saque del apuro.

Si bien hay excelentes servicios sin costo para alojar archivos a veces nos encontramos con que no aceptan todo tipo de archivos o que su interfaz es tan complicada que parecer?a dise?ada s?lo para ingenieros inform?ticos.

Aunque no me gusta depender de tantos servicios externos (pero tampoco quiero pagar por uno propio) una de las mejores opciones es utilizar el servicio de alojamiento de Google a trav�s de Google Sites, total, si nuestros blogs y fotos se alojan en los servicios de Google pues qu� m?s da usar uno m?s de �l.

Lo primero es entrar a Google Sites y crear un sitio.

A continuaci?n aparecer?n opciones para elegir el dise?o y para ponerle un nombre al sitio. Seleccionamos el dise?o, indicamos el nombre y abajo hacemos click en Mas opciones, ah? verificamos que est� marcada la casilla Compartir con todo el mundo.

Una vez hecho esto habremos creado el sitio, ahora vamos a la parte superior derecha y hacemos click en Crear p?gina.

Ah? deberemos seleccionar la plantilla Archivador y ponerle un nombre.

Habiendo hecho esto ya podemos subir archivos a Google Sites, s?lo damos click en A?adir archivo.

Una caracter?stica que tiene es que podemos agregar una descripci?n al archivo que estamos subiendo, esto es para que no nos hagamos un l?o cuando tengamos muchos archivos ah?.

Ya que el archivo se ha subido veremos que aparece en la lista junto con un link que dice Descargar. Con el bot?n derecho damos click sobre ese enlace y copiamos la direcci?n del enlace.

Esa es la URL del archivo que podremos usar en donde lo vayamos a ocupar, s?lo deberemos borrar el ?attredirects=0&d=1 que aparece a final de todas las URLs que tomemos de Google Sites.

Si quieres que tu p?gina de archivos sea lo primero que se vea cuando entres a tu sitio de Google Sites entonces estando en la p?gina de archivos que has creado haz click en la parte superior derecha donde dice M?s acciones y luego en Administrar sitio.

Ahora en el men? del lado izquierdo click en General y donde dice P?gina de destino damos click en Cambiar.

Ah? elegimos la p?gina de archivos que creamos y listo.

Las ventajas de usar Google Sites como alojamiento son que acepta m?ltiples tipos de archivos, el ancho de banda es bastante bueno y la interfaz es muy sencilla.

Las desventajas es que hay limitaci?n de tama?o en los archivos y que los archivos subidos ah? no funcionan si queremos usarlos en un dominio propio.