Tutoriales blogger!

Acortadores de URLs para todos los gustos

La función principal de un acortador de URLs es lo que su nombre dice, hacer más corta una URL larga, esto es para evitar enlaces extensos llenos de decenas de letras, signos y números, principalmente pensado para aprovechar los espacios de caracteres del microblogging.

Y desde que estos aparecieron han salido un sin fin de sitios que dan este servicio de acortamiento de URLs, unos más conocidos que otros, y aunque todos hacen lo mismo hay unos que se destacan por sus peculiares características como son los que veremos a continuación.

Bit.ly es probablemente el más conocido debido a que fue el servicio que utilizó Twitter y aunque sí, es el más usado, muchos desconocen que se pueden obtener estadísticas de los enlaces acortados que hagas, sólo hay que crear una cuenta gratuita y podrás conocer cuánta gente entra a tus enlaces cortos.

Enlace | Bit.ly

Por supuesto que el imperio de Google no podía quedarse atrás en estos temas así que desde 2009 lanzó su acortador de URLs y aunque funciona como un simple acortador de enlaces también cuenta con un sistema de estadísticas en tiempo real, sólo basta con loguearte con tu cuenta de Google y tendrás acceso a las estadísticas de todas las URLs que has acortado.
Y por si fuera poco ha puesto a disposición de todos la aplicación Google Short Links, para quienes cuentan con un dominio personalizado puedan crear su propio acortador de URLs.

Enlace | Goo.gl
Tutorial | Google Short Links

Is.gd es uno de los acortadores que se ha vuelto favorito de muchos quizá por lo estable que es el servicio, o quizá porque tiene la posibilidad de que con sólo ponerle un guión (-) al final de la URL acortada podemos saber cuál es la dirección Web a la que dirige; de este modo las personas a quienes les compartimos los enlaces pueden saber de forma segura a qué lugar están yendo.

Enlace | Is.gd
Ejemplo | http://is.gd/fXHPI-

TinyURL es sin duda de los servicios de acortamiento más conocidos en la red y a diferencia de muchos otros con él puedes personalizar la dirección corta, sólo basta poner el nombre del enlace que quieres en Custom alias y si está disponible podrás tener una URL corta personalizada, lo cual agradecerán los que buscan SEO a toda costa.

Enlace | TinyURL
Ejemplo | http://tinyurl.com/trucosblogger

Uno un poco menos conocido pero con la misma característica que el anterior es Tiny.cc, el cual también nos permite personalizar la URL acortada. La ventaja respecto a la anterior es que al ser menos conocida hay más posibilidades de encontrar el nombre personalizado del enlace.

Enlace | Tiny.cc
Ejemplo | http://tiny.cc/ciudadblogger

Y ya que estamos en el tema de los acortadores personalizados pues qué mejor que además de poder personalizar el nombre del enlace también podamos personalizar el nombre del dominio. ¿Cómo? Pues MeaningfulURL nos da la posibilidad de escoger dentro de una lista el nombre del dominio, algunos de ellos son: thanks.to, happy-birthday.to, invite.to, vote.to, enter.to, sorry.to, etc.

Enlace | MeaningfulURL
Ejemplo | http://enter.to/fondos240

Y si necesitas compartir más de un link a la vez entonces quizá necesites usar LinkBunch, un acortador que permite incluir en una sola URL varios enlaces para compartir, sólo hay que ingresar todas las URLs que quieres acortar y tendrás una URL corta que contendrá las URLs largas que has incluido.

Enlace | LinkBunch
Ejemplo | http://linkbun.ch/030qw

Otro servicio similar que agrupa varios enlaces en una sola URL acortada es Fur.ly, pero con la gran diferencia que en lugar de abrir una página con las direcciones de los enlaces, abre la página del primer enlace y arriba una barra para seleccionar los demás links que contiene la URL corta.

Enlace | Fur.ly
Ejemplo | http://fur.ly/2f2g

Probablemente haya enlaces que no quieras que vea todo mundo, ya sea por privacidad o porque no es apto para todo el público. En esos casos agregarle una contraseña al enlace se vuelve una excelente opción, y es eso lo que Thinfi hace, nos permite agregarle una contraseña a la URL que acortaremos para que sólo quienes tengan ese password puedan ver el contenido.

Enlace | Thinfi
Ejemplo | http://thinfi.com/4ib
Password | potro

Algo muy similar pero con otras curiosidades más es Trick.ly, un acortador que nos permite agregar una contraseña y una pista para quienes no recuerdan con exactitud el password que abre el enlace.

Otras dos variantes más que nos ofrece es utilizar una adivinanza como password o una pregunta en concreto.

Enlace | Trick.ly
Ejemplo | http://trick.ly/4rB
Password | potro
Pista | Ciudad Blogger

Y si lo que te preocupa es la seguridad de tu equipo entonces no hay mejor opción que utilizar el acortador de McAfee que además de acortar la URL también examinará el contenido en busca de virus, malware y amenazas que podrían dañar tu equipo.

Enlace | McAfee

Pero si eres de aquellos que les gusta ganar dinero en Internet entonces necesitarás un servicio que además de acortar las URLs también te pague por cada visita que tenga el enlace que has acortado.

Así es, sólo necesitas crear una cuenta gratuita en su sitio y te pagarán por cada visita que tengan tus URLs acortadas. Pero claro, hay dos cosas que resaltar, una es que el pago por cada visita es muy poco, y otra que cada URL acortada tendrá un anuncio antes de poderse ver el contenido.

Enlace | YvY.me
Ejemplo | http://yvy.me/GiNV1D

Pero no a todos les gusta seguir las reglas, así que para quienes van en contra de todo, ¿por qué tener una URL corta si podemos hacerla mucho más larga? Eso es justo lo que HugeURL hace, toma una URL acortada o "normal" y la convierte en una URL extra larga con docenas de caracteres.

Enlace | HugeURL
Ejemplo |

http://www.hugeurl.com/?YjdjZDNlYjRlYjZjMzMxMjVhNDY4MWZhZjAy
NmY3YmImMTUmVm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3WkRSWFJteFZVMjA1
VjAxV2JETlhhMk0xVmpGYWMySkVUbGhoTWsweFdWZDRTMk14WkhGUmJGWlhZ
a2hDVVZacVFtRlpWMDE1VTJ0V1ZXSkhhRzlVVmxaM1ZsWmFkR05GWkZwV01E
RTFWVEowVjFaWFNraGhSemxWVmpOT00xcFZXbUZqVmtaMFVteFNUbUY2UlRG
V1ZFb3dWakZhV0ZOcmFHaFNlbXhXVm0weGIxSkdXbGRYYlVaclVqRmFTRll5
TVRSVk1rcElaSHBHVjJFeVVYZFpla3BIWXpGT2RWVnRhRk5sYlhoWFZtMXdU
MVF3TUhoalJscFlZbFZhY2xWcVFURlNNWEJHVjJ4T1ZXSkdjRlpXYlhSM1Zq
SktWVkpZWkZwV1JWcHlWVEJhVDJOc2NFaGpSbEpUVmxoQ1dsWnJXbGRaVjFG
NFZHdGtWbUpHV2xSWmJGWmhZMVphZEdSSFJrNVNiRm93V2xWYVQxWlhTbFpY
VkVwV1lrWktTRlpxUm1GU2JVbDZXa1prYUdFeGNHOVdha0poVkRKT2RGTnJa
RlJpVjNoVVZGY3hiMWRzV1hoYVJGSnBUV3RzTTFSVmFHOVhSMHBJVld4c1dt
SkdXbWhaTW5oWFl6RldjbHBHYUdsU00xRjZWakowVTFVeFduSk5XRXBxVWxk
NGFGVXdhRU5UUmxweFUydGFiRlpzV2xwWGExcDNWakZLVjJOSWJGZFdSVXBv
VmtSS1QyTXlUa1poUjNCVFlrVndWVlp0ZUc5Uk1XUnpWMjVLV0dKSFVtOVVW
bHBYVGxaYVdFNVZPV2hpUlhBd1ZsZDRjMWR0U2tkWGJXaGFUVlp3ZWxreWVH
dGtSa3AwWlVaa2FWWnJiekZXYlhCS1RWZEZlRmRZWkU1V1ZscFVXVlJHZDFZ
eGJISlhhM1JUVW14d2VGVldhRzloTVZwelYycEdWMDF1YUdoWlZXUkdaVWRP
UjJKR2FHaE5WbkJ2Vm10U1MxUXlVa2RVYmtwaFVteEtjRlpxVG05WFZscFlZ
MFU1YVUxWFVraFdNalZUVkd4T1NGVnVUbFpoYTBwNlZHdGFWbVZYVWtoa1Iy
aFhZWHBXU0ZacVNqUlZNV1IwVTJ0b2FGSnNTbGhVVmxwM1YwWnJlRmRyZEdw
aVZrcElWbGQ0YTJGV1NuUlBWRTVYVFc1b1dGbHFTa1psUm1SWldrVTFWMVpz
Y0ZWWFZsSkhaREZrUjJKSVNtRlNlbXh4V1d0YWQyVkdWWGxrUjBacFVteHdl
bFl5ZUhkWFIwVjRZMGhLV2xaWFVrZGFWV1JQVWpKS1IyRkhhRTVXYmtKMlZt
MTBVMU14VVhsVmEyUlVZbXR3YUZWdE1XOWpSbHB4VkcwNVYxWnRVbGhXVjNN
MVZXc3hjMU51Y0ZkTmFsWlVWa2Q0YTFOR1ZuTlhiRlpYVFRGS05sWkhlR0ZX
TWxKSVZXdG9hMUp0VWs5WlZFNURUbFphU0dWSFJtcE5WMUl3VlRKMGIyRkdT
bk5UYkdoVlZsWndNMVpyV21GalZrcDBaRWQwVTJFelFYZFhiRlpoWVRKR1Yx
ZHVTbWxsYTFwWVdXeG9RMU14Y0VWUlZFWllVbXR3ZVZkcldtOWhWMFkyVm01
b1YxWkZTblpWVkVaelZqRldjMWRzYUdsV1ZuQjZWMWQwWVdReVZrZFdXR3hy
VWpCYWNGVnRlSGRsYkZWNVpVaGtXR0pHY0ZoWk1HaExWakpHY2xkcmVGZGhh
M0JRVldwS1MxSXhjRWRhUlRWT1VsaENTMVpxUm1GVk1VMTRWbGhvV0ZkSGFG
bFpiWGhoVmpGc2MxcEhPVmRTYlhoYVdUQmFhMkpIU2toVmJHeGhWbGROTVZs
V1ZYaFhSbFp5WVVaa1RtRnNXbFZXYTJRMFlURk9SMVp1VGxoaVJscFlWRlJH
UzA1c1draGtSMFphVm0xU1NWWlhkRzloTVVwMFlVWlNWVlpXY0dGVVZscGhZ
ekZ3UlZWdGNFNVdNVWwzVmxSS01HSXlSa2RUYms1VVlrZG9WbFp0ZUhkTk1X
eFdWMjVLYkZKdFVubFhhMXByVmpKRmVsRnFXbGRoTWxJMlZGWmFhMUl4VG5O
WGJYQlRWak5vV1ZkWGVHOVJNVkpIVlc1S1dHSkZjSE5XYlhSM1pWWmtjbGR0
T1doV01Ga3lWbTAxYjFZeFdrWlRibHBXVmtWYWVsWnFSbGRqTVdSellVZHNh
VlpyY0RaV01XUXdXVmROZDAxSWFGaFhSM2hQVm14a1UxWXhVbGhrU0dSVFRW
WktlbGxWYUd0WFIwcEhZMFpvV2sxR1NsQldNbmhoVjBaV2NscEhSbGRXTVVw
UlZsZHdSMVl5VFhsU2EyaHBVbXMxY0ZVd1ZrdE5iRnB4VW0xR1ZrMVZiRFZW
YkdodlYwWmtTR1ZHV2xwV1JWb3pXVlZhVjJOV1RuUlBWbVJUWWtWd1dsWkhl
R3BPVmxsNFYyNU9hbEpYYUZoV2FrNVNaREZzVjFaWWFGaFNiRnA2V1ZWYWEx
UnNXWGxoUkVwWFRWWndhRlY2Umt0ak1WSjFWV3hDVjJKR2NGbFhWM1J2VVRK
SmVGZHJaRmRpVlZwaFZtcEdTMUl4VW5OWGJVWldVbXhzTlZsVmFFTldiVXBJ
WVVWU1ZXSllhSEpXYkZwSFpFWktkR05GTlZkTlZXd3pWbXhrTkdJeVRYbFNh
MlJVWWtkU1ZWbHNWbUZoUmxweFZHeE9hRkpzYkROV01qVnJWVEpLU1ZGcmFG
aGhNWEJVVmxSS1JtVnNSbGxhUm1ocFVteHdiMWRXVWt0U01WbDRZMFZhWVZK
ck5XOVphMmhEVjFaa1dHVkdUbE5oZWtaSVZqSjRWMVV5U2tsUmJrNVdZbFJH
VkZZeWVHdGpiRnBWVW14a1RsWnVRalpYVkVKaFZqRmtSMWRZY0ZaaWEzQllW
bXRXWVdWc1duRlNiR1JxVFZkU2VsbFZaSE5XTVZwMVVXeHdWMkpIVGpSVWEy
UlNaVlphY2xwR1pHbGlSWEJRVm0xNGExVXhaRWRWYkZwV1lUSlNjMVp0ZUV0
bGJGcDBUVVJXVjAxRVJsZFpibkJMVm0xS1dWVnVXbGRoYTFwb1ZXMTRhMk50
VmtkYVIyaG9UVEJLVWxac1kzaE9SbXhZVkZob2FsSlhhSEJWYlhNeFZERmFj
MWRzY0d4aVJuQXdXbFZrUjFack1WWmlSRkphWVRGd2NsWXdaRXRqYlU1R1Qx
WmthVmRIWjNwV2FrSmhZekZrV0ZSclpHRlNiVkpVV1d0YWQwNVdXblJOVkVK
YVZteEdORlp0ZUZkVWJFcElZM3ByUFE9PQ==

Editor de HTML online

Seguramente te ha pasado que ves un gadget y lo quieres para tu blog, pero no sabes cómo se verá el gadget o si realmente funciona. Lo mismo cuando queremos probar nuevos códigos, dar formato a un texto, crear tablas, etc. suele ser cansado tener que entrar al blog, hacer pruebas, guardar, ver el blog cómo quedó, regresar a editar, volver a probar... en fin, es un procedimiento que puede ser muy agotador.

Para estos casos es muy útil usar un editor de HTML online que nos muestre cómo se ven las cosas que queremos hacer en tiempo real.

¿Para que sirve? Para escribir los códigos HTML que queremos usar y obtener la muestra inmediata del código en cuestión, así no tenemos que estar entrando al blog cientos de veces para probar algún código, simplemente lo escribirmos en el editor online y veremos los resultados inmediatos de lo que estamos haciendo.

Para hacer la prueba de ver cómo funciona entra a Real-time HTML Editor y en la parte de arriba borra las letras que hay y en su lugar pega el siguiente código:

<style type="text/css">
body {margin:0; padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:small;}
#header {
padding:20px;
background:#333;
border-bottom:1px solid #fff;}
#header h1 {
padding:0; margin:0;
color:#ccc;
font-family:Verdana, serif;
font-weight:bold;
font-size:190%;}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc;
border-bottom:1px solid #999;}
#nav li {
float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-weight:bold;
font-size:90%;
color:#666;
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDw8bY8pL45e1YtTQ4hjUeyb80JvF-sDSCGQiq7pWPOgddeRwDlnts2AwmpL3LrCUSFcN-PmPVlX3luNpPVpX9zlH8DrhSB32hi0Nc8ufl7twa2i8OdsSXllohe5EwxkYsfeVCfThBVq4/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
</style>

<div id="header">
<h1>Ciudad Blogger</h1>
</div>
<ul id="nav">
<li id="nav-1"><a href="#">Inicio</a></li>
<li id="nav-2"><a href="#">Directorio</a></li>
<li id="nav-3"><a href="#">Contacto</a></li>
<li id="nav-4"><a href="#">Acerca de</a></li>
</ul>

¿Lo ves? No tuviste que entrar a Blogger para probar cómo se ve el menú, con lo cual ya te ahorraste bastante tiempo.

Lo mismo puedes hacer con cualquier otro código que quieras probar como una imagen, una tabla, o hasta el diseño de una página web completa.

Enlace | Real-time HTML Editor

Araña interactiva para el blog, que se mueve

Esto no es como aquella araña de Halloween que vimos hace tiempo que no era mas que una imagen GIF animada. Esto es parte de la modernidad web, hecho en canvas, y se trata de una araña que se mueve por si sola dentro de su telaraña, y que podemos arrastrar con el cursor, tanto a la araña como a la telaraña y sus puntos de apoyo. El demo aquí mismo.

Este gracioso experimento es de Sub Protocol, y nos servirá como parte de las decoraciones de Halloween en el blog. Este arácnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempeño de estas canvas son más eficientes si alojamos los scripts directo en la plantilla, o al menos a mí esa percepción me ha dado.

Para colocar esta araña interactiva en tu blog ingresa en Diseño | Añadir un gadget | HTML/Javascript y ahí pega este código:

<script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>

Si quieres también puedes hacer que sea "flotante", es decir, que permanezca estática sin importar si subimos o bajamos el scroll de la página. Para conseguirlo sólo añade lo siguiente debajo del código anterior.

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo cámbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha cámbialo por right. Toma en cuenta que al hacerla flotante podría obstruir algún elemento de tu blog que quede por debajo de ella.

Con esta araña, esta próxima noche de brujas tú y tus lectores podrán entretenerse un rato en el blog jugando con ella, eso sí, no la saques de su red o la pobre morirá :(

Múltiples fondos (background) con CSS

Quizá en algún momento quieras usar dos imágenes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo más recurrente es crear dos o más contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o más imágenes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.

En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ahí agregar las URLs de las imágenes, separadas por una coma. Por ejemplo, si quisiéramos añadir dos imágenes al fondo del blog sería algo así:

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}

Y para cambiar su posición usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y después ponemos la otra posición.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}

Ahí hemos dicho que la primera imagen se acomodará en el lado superior izquierdo, y la segunda en el lado inferior derecho.
También podemos especificar si se repetirán las imágenes o no.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Si también queremos añadir un color de fondo podemos hacerlo usando background-color.

body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Puedes ver un ejemplo con el DIV que está a continuación, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.

Múltiples Fondos con CSS

Este es el código completo que he usado para el ejemplo anterior.

CSS

#doblefondo {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8MjYdZuhov_vOh0tl89-2TIrysuoleD0lr8D3t2601otxKcfu6ZdCG4SQFmH1WDPcG-LOyYulC1xClfwGv3BcDijAIfRXolr0kFEa2__2kWIbKCNdoPvf-MUgbxTQvIVU1ONp-jWZqII/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv8mdows-zjQnmjOTJkWP5-JyjnwvTaMiqpLAxDHRLCdmG9RRe2TNcOQnyLxIhTP276d0KXZUiRyyl27lR8hVmHM4qctGRrvv_z130YvZZSJ_8GplT1psKOb-ZVQqrlrV1JWlBup5J480/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>

Pero el número de imágenes no es una limitante ya que podemos usar tres o más y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, añadimos tres imágenes de fondo, cada una tiene una posición diferente, y la tercera se repetirá horizontalmente.

Este es el código completo.

CSS

#doblefondo {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJY5HwNDWA8J-lj63HHnFgyWUxgX8fGtn1McAKF-GHl5AA5G-emDrIdd0-ZnFkXa0yELNrpp-mEBnNXbbk4J3v64xA_9Nhm4cHSrEAgF8XHq1eEqV1G2B65OU4s1FQFezZahXq6buXTEU/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkW4oatz_7BGGw5Sm5jxzpi3lPJXqMFwrrKGVGfnTg2qbkS6fq__YXCBVSnW5qaDjoDPE1oX-Y0WZxDXp4Y97cjULIMB9qrOkytR17OMDZT-gvSruoAHzDRAh0NxAa3zN9-iw8uqRpp2GT/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfpebj2QIaLEf1CvNZGW-9BnIuumm4XbGx4hptQLv8EUR8PUySy3slwEx70bnvEY2DTlhfhCG11nv-wviXlAoGTgCWhOVJBDYdkkiV8vcILOzsN2K6TA31QpMY_AIcUjCsRgCW7zkA5cz/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doblefondo">
</div>

Como puedes ver, poner más de una imagen de fondo en la plantilla del blog o un contenedor es de lo más sencillo. Recuerda siempre separar con una coma las propiedades e imágenes, excepto la última, esa no lleva coma, sólo punto y coma.
En el caso de Internet Explorer funciona de la versión 9 en adelante así que prácticamente todos lo verán ya que por suerte pocos son los que usan versiones anteriores.

Lluvia en el blog

Los que somos un tanto bohemios disfrutamos de la lluvia tanto como de una buena taza de café. Y ya que nos gustan tanto las precipitaciones pluviales vamos a ver cómo poner lluvia en el blog con Javascriptpara darle un poco de nostalgia al blog y que bien puede usarse para las próximas fiestas de Halloween. El ejemplo aquí mismo.

Este script de Giffy se pone y se quita en un solo paso. Adicionalmente le he añadido un sonido suave de lluvia, pero este es opcional.

Para poner esta lluvia en el blog, entra en la Edición HTML de tu plantilla, y antes de </body> pega este código:

<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習！</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='http://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>

Lo que está en color naranja es el iframe que contiene el sonido de la lluvia, si no quieres el sonido elimina toda esa parte.
En lo que concierne al script, no tiene opciones de configuración pero creo que tampoco hace falta ya que cumple con su cometido.

Tabla de contenido (Sitemap) con pestañas

Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica, en nuestro caso accediendo a las etiquetas del blog y sus respectivas entradas publicadas.
Ya hemos visto un par de ellos, pero este en particular me gusta por la forma como está organizado todo, en pestañas, tipo tabview lo cual hace que tenga un diseño más intuitivo para el usuario, además que incluye varias opciones que lo hacen más completo.

Esta tabla de contenido es una creación de Taufik Nurrohman, un genio indonesio en estos temas de Blogger. No requiere de librerías externas así que prácticamente no tendremos que preocuparnos por el tema de la compatibilidad.

El demo lo puedes ver aquí mismo, del lado izquierdo están las etiquetas del blog, al dar click sobre una de ellas se muestran del lado derecho las entradas correspondientes a dicha etiqueta.

Estas tablas de contenido por lo general se muestran en una página estática, por ese motivo pondremos todo el código dentro de la página, incluyendo los estilos para evitar que estos se carguen en cualquier otra parte del blog donde el sitemap no se mostrará.
Para poner esta tabla de contenido -sitemap- en tu blog crea una página, y estando en la pestaña HTMLde la página pega este código:

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXdYObm41qeF_MnshseKJYKG7cmABs_k8OhXPDUTwK1N_1XOHCX6G502KDEMc84utPKVIOfsMhfwP8qxFsylv_JWLCxgjF3H2wYB5N-s4DJ5rVkfFqIyYvc478l1sx6NhBO1hm1QLqqg/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXdYObm41qeF_MnshseKJYKG7cmABs_k8OhXPDUTwK1N_1XOHCX6G502KDEMc84utPKVIOfsMhfwP8qxFsylv_JWLCxgjF3H2wYB5N-s4DJ5rVkfFqIyYvc478l1sx6NhBO1hm1QLqqg/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

En donde está en color rojo va el nombre de tu blog. En el área de los estilos verás en color verde dónde puedes personalizar el aspecto.

Ahora vamos con las opciones de este gadget, estas opciones se encuentran en el código que añadiste:

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes

Aunque este gadget ofrece la posibilidad de mostrar resúmenes (sumarios) de las entradas con su respectiva miniatura, se recomienda no activar ninguna de las dos opciones para evitar lentitud en la carga. También es importante que una vez que pongas el código no cambies a la pestaña Redactar.

Este sitemap es responsive, o sea que se adapta al tamaño del contenedor y cambia su forma cuando se mira desde un móvil por ejemplo. Por tal motivo debajo de @media (max-width:700px) verás otros estilos, esos son los estilos para el modo "pequeño" del sitemap.

Esta tabla de contenido o sitemap me parece que es de las más completas que hemos visto hasta ahora ya que ofrece diversas opciones que podemos configurar para darle el aspecto que queramos. Y lo mejor de todo es que no dependeremos de librerías o scripts externos, todo está en un solo código listo para copiar y pegar.

Cursor para el blog con motivos navideños

Esta es la excusa perfecta para hacer rabiar al Grinch con este cursor que al moverlo desprende motivos navideños por su paso.
Esferas, muñecos de nieve, botas, regalos, son algunas de las pequeñas imágenes que aparecen en el blog cuando este cursor está en movimiento.

El demo puedes verlo aquí mismo, al mover el cursor aparecerán objetos de Navidad que desaparecerán sutilmente.

Los encargados de esta curiosidad son nuevamente el equipo de Giffy, y le dará a tu blog ese toque festivo que ya se siente en el ambiente.

Para poner este cursor con motivos navideños en tu blog entra en Plantilla | Edición de HTML y antes de </body> pega el siguiente código:

<div style='display:none'><script type="text/javascript" src="http://blogparts.giffy.me/0035/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/"><img style="border:0;" src="http://blogparts.giffy.me/0035/parts.png" alt="クリスマスの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/" rel="nofollow">無料で面白タイピング！</a></p></div>

Guarda los cambios y listo. Una vez que se te haya pasado el espíritu de la Navidad elimina el código y el cursor se habrá ido.
Si buscas algo más discreto entonces quizá te interesen estos cursores de navidad.