TRUCOS:BLOGSPOT ENTRADAS

1
Hace tiempo me preguntaron cmo haba conseguido que en mi sidebar cada elemento se mostrase como un bloque individual, por eso voy a tratar de explicar lo mejor posible cmo conseguirlo, aunque con la variante que tambin explicar cmo hacerlo con cada post (entrada). Sin duda es una buena opcin para mejorar el diseo de nuestros queridos blogspot.

1. Enmarcar post (entradas) por separado en Blogger.

1) Ves a Diseo 2) Edicin de HTML 3) Busca el cdigo .post { (teclea Ctrl + F para buscar ms rpido) 4) Debajo de l pega lo siguiente: border:1px solid black; } .main .post { margin:0 0 1.5em;padding:0 0 1.5em; padding: 10px; } La primera lnea de border hace referencia al borde que recorrer cada entrada individual. Si quieres ms informacin sobre los bordes puedes visitar la siguiente entrada: Bordes en Blogger. Padding es la separacin o distancia que habr entre el borde y el comienzo del texto. Margin es la distancia de separacin entre el borde y la parte exterior del elemento. Cambia los valores de padding y margin segn tus necesidades y la estructura de tu blog. Cada plantilla de Blogger es un mundo. Si te quedan dudas fjate en esta imagen extrada de comocreartuweb.

5) Por ltimo clica en vista previa y si todo est bien, guarda tu plantilla.

2. Enmarcar gadgets (widgets) de la sidebar por separado en Blogger.

1) Ves a Diseo 2) Edicin de HTML 3) Busca el cdigo .sidebar .widget, (teclea Ctrl + F para buscar ms rpido) 4) Debajo de l pega lo siguiente: .main .widget { border:1px solid black; margin:0 0 1.5em; padding: 10px; } Es decir, al final debera quedarte algo as: .sidebar .widget, .main .widget { border:1px solid black; margin:0 0 1.5em; padding: 10px; } Para modificarlo, te servir lo mismo que coment en la explicacin de cmo enmarcar las entradas por separado. 5) Clica en vista previa, y si no hay ningn fallo guarda tu plantilla. Espero que estos dos trucos para Blogger te hayan servido para decorar y disear an ms tu blogspot.

2
En pleno verano muchos no tenemos vacaciones, puesto que tenemos otras obligaciones que atender como los estudios, familia y otras preocupaciones ms. Tal vez sea un buen momento para relajarnos y prestar un poco de

atencin a nuestro cuerpo y su armona, ya sea mediante tcnicas relajantes variopintas o mediante kinesiologia de kineteam y dems tcnicas teraputicas.

Es por eso que para los que no podamos viajar, que mejor que contar con un fondo de pantalla relajante para colocar de fondo de pantalla en la computadora o utilizar en nuestro blog de Blogger. Aunque yo os recomiendo colocarlo de fondo en una entrada del blog siguiendo estas sencillas indicaciones: 1) Ir a Diseo 2) Edicin de HTML 3) Buscar en tu plantilla #main-wrapper (teclea Ctrl + F para encontrarlo ms rpido). 4) Justo debajo pega el siguiente cdigo: Cdigo a copiar/pegarbackground: url(http://www...jpg) repeat-y; En el enlace de color rojo debes poner la direccin de la imagen que siempre quieres que aparezca como fondo en las entradas. En este caso la que te acabas de descargar de fondo relajante. Dependiendo de tu plantilla tendrs que aadir un margen. Para ello emplearemos el valor padding. Para especificar en dnde queremos que comience el margen aadiremos a padding lo siguiente: -left (marge a la izquierda) -right (margen a la derecha) -top (margen arriba) -bottom (margen abajo) Por ejemplo, si necesitamos un margen a la izquierda sera as: Cdigo de ejemplobackground: url(http://www...jpg) repeat-y; padding-left:70px; Tendremos que cambiar el valor 70px por el valor que necesitemos para que se vea correctamente. 5) Antes de guardar nada, clica en vista previa, y si todo est bien guarda tu plantilla. Te gust el resultado?

3
Si has empezado recientemente con tu blog quiz te ests preguntando por cmo poner vdeos de Youtube en tu blog. Quiz sea algo muy bsico y fcil para unos, pero a da de hoy es algo desconocido para otros. Por eso, hoy, aprenderemos a aadir vdeos de YouTube en nuestro Blogspot. Una vez hayamos buscado videos en el YouTube y tengamos claro cul queremos adjuntar en nuestra bitcora, seleccionamos la opcin de Insertar. Copiamos el cdigo embed (ratn botn derecho, copiar):

Luego la pegamos en la entrada de nuestro blog. Clica en vista previa antes de publicar si deseas apreciar cul ser el resultado final.

Una vez finalizado el proceso, le daremos a Publicar entrada y nos aparecer en nuestro blog. Qu mejor que poner videos graciosos, vdeos con tutoriales, vdeos de alguna noticia reciente, o sobre el tema que quieras tratar en tu blog. Dicen que una imagen vale ms que mil palabras. Por tanto, un vdeo todava ms, no crees? Aqu tienes un ejemplo del resultado:

Esta es una de las tantas ventajas que Wordpress tiene ante Blogger, es decir, la posibilidad de incluir informacin del autor al final de cada entrada, el clsico "Acerca del autor", de manera que los lectores sepan quin redacta cada artculo y sepan ms a cerca de l. Antes de nada, gracias a CiudadBlogger por el truco. Para conseguir instalar este truco en nuestro blog de Blogger deberemos seguir los siguientes pasos: 1) Debemos ir a diseo/Edicin de HTML, expandimos artilugios, y buscamos el siguiente cdigo para eliminarlo:
<span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'> <data:post.author/> </span> </b:if> </span>

2) ya hecho esto, buscamos lo siguiente:

<div class='post-footer'>

y justo debajo de l pegamos este cdigo:

<div class='acercadelautor'> <img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong> <p>Aqu escribimos una breve descripcin del autor.</p> </div>

Lo que est en verde (URL del Avatar) es donde debemos agregar la direccin de la imgen a utilizar, recuerda que la direccin debe terminar como imagen, ya sea .jpg , .gif, .png, etc. Y en la parte Azul, debemos redactar una breve descripcin del autor, ya sea sus otros pasatiempos, otros blogs o webs en donde escriba, etc. 3) Finalmente debemos agregar los estilos, esto es la apariencia final que obtendr el recuadro.
.acercadelautor { background:#EFFBFB; /* Color de fondo */ border:1px solid #ccc; /* Borde */ letter-spacing:normal;

color:#424242; /* Color del texto */ text-transform:none; font-size:12px; /* Tamao del texto */ padding:5px; margin:10px 0 10px 0; } .acercadelautor strong { color:#1C1C1C; /* Color del nombre del autor */ font-weight:bold; font-size:13px; /* Tamao de letra del nombre del autor */ padding-left:5px; }

Lo que est en color rojo es lo que podemos modificar a nuestro antojo para ir modificando la apariencia. Podemos probar revisando la vista previa hasta obtener lo que queramos. El resultado sera algo as:

Pero qu pasa si hay ms autores en nuestro blog? El procedimiento es similar, pero cambian los cdigos, es decir a contar desde el paso 2, pegamos el siguiente cdigo:
<div class='acercadelautor'><b:if cond='data:post.author == "Autor 1"'><img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='fontstyle:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong> <p>Aqu escribimos una breve descripcin del autor.</p> </b:if>

<b:if cond='data:post.author == "Autor 2"'><img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; fontsize:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Aqu escribimos una breve descripcin del autor.</p> </b:if>

Como vemos, los cambios no son muchos, en caso de haber ms autores, se utiliza el mismo cdigo del segundo autor, pero se les cambia las partes de color Rojo. Es decir, en vez de poner "Autor 2", este se cambia por "Autor 3", "Autor 4", y as sucesivamente. En este caso el resultado tendra este aspecto:

5
Blogger sigue mejorando da a da. Si hace poco nos sorprenda con sus estadsticas, ahora lo hace con iconos para compartir en redes sociales (Twitter, Facebook y Buzz) y e-mail.

Para instalarlos en nuestro blog realizaremos los siguientes pasos: 1) Vamos a Diseo 2) Editar entradas 3) Seleccionamos la casilla

As de simple. Si de todas formas deseas poner otros iconos para compartir tu contenido en redes sociales, puedes optar por utilizar un gadget externo.

6
Prcticamente en los inicios de este blog ya explicamos cmo numerar las pginas en Blogger, con ello conseguamos un diseo elegante a la vez que profesional. Hoy vamos a explicar otra manera de paginar el blog, pero esta vez con un nuevo estilo que gracias a Abu-Farhan y al todopoderoso Javascript lograremos un bonito efecto con scroll.

El proceso de paginacin en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos: 1) Vamos a Diseo 2) Edicin de HTML 3) Marcamos la casilla "Expandir artilugios" 4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar ms rpido) 5) Antes de ]]></b:skin> pegaremos el siguiente cdigo: <!-- Paginar Blogger --> .paginator { margin-top:60px; font-size:1em; } .paginator table { border-collapse:collapse; table-layout:fixed; width:100%; } .paginator table td { padding:0; white-space:nowrap; text-align:center; } .paginator span { display:block; padding:3px 0; color:#fff; } .paginator span strong, .paginator span a { padding:2px 6px; } .paginator span strong {

background:#ff6c24; font-style:normal; font-weight:normal; } .paginator .scroll_bar { width:100%; height:20px; position:relative; margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px; background:#ccc; overflow:hidden; } .paginator .scroll_thumb { position:absolute; z-index:2; width:0; height:3px; top:0; left:0; font-size:1px; background:#363636; } .paginator .scroll_knob { position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px; height:20px; overflow:hidden; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/sl ider_knob.gif) no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator .current_page_mark { position:absolute; z-index:1; top:0; left:0; width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize .scroll_thumb { display:none; } .paginator_pages { width:600px;

text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; } <!-- Fin Paginar Blogger --> 6) Ahora buscamos </body> 7) Antes de </body> pegaremos el siguiente cdigo: <script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script> <script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=7; var numshowpage=6; </script> <script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000forblogger-v1.0.0.js' type='text/javascript'/> Observaciones: var postperpage=7; -> Indica el nmero de entradas por pgina. var numshowpage=6; -> Indica el nmero de pginas que se mostrarn en el scroll. 8) Por ltimo buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + &quot;?&amp;maxresults=7&quot;' De esta forma estaremos editando la paginacin en las etiquetas o categoras (labels). Clicamos en vista previa y si todo est bien guardaremos nuestra plantilla. Recuerda que es recomendable guardar los scripts en tu PC o alojarlos en alguna pgina web que permita subir archivos javascript. Ya est todo listo. Espero que te guste esta nueva forma de numerar las pginas en Blogger.

7
Jssica de Diversidad y variadas explic de forma excepcional cmo poner separadores entre las entradas (post) de nuestros blogspots. Estos separadores son conocidos como dividers y son muy tiles para llevar un correcto orden y claridad en el blog. Para saber a lo que me refiero puedes ver este ejemplo:

Para aadir este tipo de separadores en tu blog debers hacer lo siguiente: 1) Ves a Diseo 2) Edicin de HTML 3) Busca en tu plantilla el cdigo .post { (teclea Ctrl + F para buscar ms rpido) 4) Te encontrars algo as (depende de tu plantilla): .post { margin:.5em 0 1.5em; padding-bottom:1.5em; } 5) Antes del final, concretamente antes de }, aade el siguiente cdigo: background: url(AQU-URL-IMAGEN-SEPARADOR); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:2.5em; 6) En definitiva debera quedarte algo as: .post { margin:.5em 0 1.5em; padding-bottom:1.5em; background: url(http://www.AQU-URL-IMAGEN-SEPARADOR.jpg); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:2.5em; } En http://www.AQU-URL-IMAGEN-SEPARADOR.jpg pon la URL de la imagen que quieras poner como separador. En leehansen encontrars varios de libre uso. 8) Por ltimo clica en vista previa y si todo est a tu gusto guarda tu plantilla. Espero que sea de tu agrado.

Recuerda que tambin puedes decorar tus entradas con los siguiente trucos que ya os expliqu anteriormente:

Imagen al final de las entradas en Blogger. Poner firma del autor en Blogger. Imagen de fondo en las entradas de Blogger.

8
En muchas ocasiones, ya sea por falta de tiempo o porque simplemente no podemos en ese momento, sera til guardar una entrada de un blog en pdf para as posteriormente poder leerla sin estar conectado a internet.

Gracias a pdfmyurl podemos guardar las entradas de los blogs que queramos. Para ello simplemente entramos en la pgina y escribimos la URL que necesitemos, por ejemplo:

Enlace | pdfmyurl

9
Poner una imagen al final de cada entrada puede ser una buena opcin para personalizar tu blogspot, y una vez ms gracias a Gema os voy a explicar cmo hacerlo . All puedes poner lo que quieras, como una imagen simptica o simplemente la imagen que t desees.

Anteriormente ya os expliqu cmo poner vuestra firma en cada entrada, por lo que sta puede ser otra muy opcin para tu blog. Para emplear este truco sigue estos pasos: 1) Ves a Diseo 2) Edicin de HTML 3) Busca en tu plantilla .post-footer { (teclea Ctrl + F para buscar ms rpido) 4) Te encontrars con algo as:

5) Antes de } aade: padding:36px 4px 2px 4px; background: url(URL DE LA IMAGEN) no-repeat top right;} 6) En URL DE LA IMAGEN pon la URL de la imagen en donde la hayas alojado. 7) Clica en vista previa y si todo est bien, guarda tu plantilla. Cosas que puedes hacer para modificarlo a tu gusto: - Si la imagen que quieres poner no sale todo lo grande que quieres, dale un valor ms alto a line-height: 1.4em; - Por defecto he puesto que la imagen salga a la derecha del fin de la entrada. Si deseas que est centrada cambia right por center, y si deseas que est a la izquierda cmbialo por left.

10
Muchos bloggers se preguntan por cmo quitar la fecha de las entradas en el blog. Pues bien, en principio hay dos formas sencillas de eliminar la fecha de las entradas. La primera consiste yendo a Diseo->Elementos de pgina->Entradas del blog>Editar. En editar os encontraris con la siguiente opcin:

Debes dejar la casilla sin seleccionar y posteriormente guardar los cambios. Si con esto an continua apareciendo la fecha en las entradas, debers realizar cambios en tu plantilla HTML. Esto puede deberse a que no ests empleando una de las plantillas mnimas que nos facilita Blogger.

1) Ves a Diseo 2) Edicin de HTML 3) Busca date-header (teclea Ctrl + F para buscar ms rpido) 4) Te encontrars con algo as: h2.date-header { margin:0; padding:0; font-weight:normal; font-size:10px; background:#fff; color:#222} Debers aadir, respetando la estructura, este cdigo: visibility:hidden; Es decir, debers quedarte as: h2.date-header { margin:0; padding:0; visibility:hidden; font-weight:normal; font-size:10px; background:#fff; color:#222} 5) Clica en vista previa, y si todo est correcto guarda tu plantilla.

11
Una alternativa a poner msica en tu blog que suene nada ms se entre en el blog es poner un gadget de un vdeo de youtube, por ejemplo en la sidebar (columna). Para conseguirlo sigue los siguientes pasos. Cuando quieres poner un vdeo de youtube en tu blog lo obtienes de esta forma:

Luego lo pegas en una entrada o como gadget, donde t prefieras o necesites.

Por ejemplo, un cdigo que copiamos de youtube para ponerlo en nuestro blog tendra la siguiente estructura:

Cdigo de ejemplo<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/zWywb_E3SRA&hl=es_ES&fs=1&"></param><para m name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zWywb_E3SRA&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Para conseguir que el vdeo se reproduzca solo al entrar en en el blog o en una determinada entrada, despus de src nos encontraremos con esta estructura: src="http://www.youtube.com/v/zWywb_E3SRA&hl=es_ES&fs=1&" Antes del cierre de comillas " deberemos aadir &autoplay=1 quedndonos finalmente as: src="http://www.youtube.com/v/zWywb_E3SRA&hl=es_ES&fs=1&&autoplay=1" Ejemplo: Sin duda Bruce Springsteen es uno de los maestros de la msica y sta es una de sus mejores canciones, al menos para m. A disfrutar este truco!

12
Emplear siempre la opcin de leer ms en nuestro blog en ocasiones puede resultar innecesario o incmodo. Por suerte hay otras formas de poner leer ms slo en una entrada. Bajo mi recomendacin, si todas tus entradas son largas, es recomendables emplear una de las formas que ya explicamos aqu y aqu. Si por el contrario slo necesitas en alguna ocasin la opcin de leer ms sta es tu entrada.

Recuerda siempre hacer copias de tu plantilla para que no tengas que arrepentirte luego de nada. Ejemplo: Leer ms

Para instalar este truco para tu blogspot haremos lo siguiente:

1) Vamos a Diseo 2) Edicin de HTML 3) Buscamos la parte de nuestra plantilla llamada </head> (tecleamos Ctrl + F para buscar ms rpido) 4) Antes de </head> pegaremos el siguiente cdigo:

<style type='text/css'> .ver_menu { display:block; } .ocultar_menu { display:none; } </style> <script type='text/JavaScript'> function desplegar(categoria){ var menu = document.getElementById(categoria); if(menu.className == &quot;ver_menu"){ menu.className = &quot;ocultar_menu"; } else{ menu.className = &quot;ver_menu"; } } </script>

5) Clica en vista previa y si no hay ningn error, guarda tu plantilla. 6) Ahora tenemos dos opciones. Si quieres poner una imagen que ponga Leer ms o la imagen que t quieras, pega el siguiente cdigo en la entrada que vayas a redactar. Recuerda, si no vas a necesitas poner Leer ms, no tendrs que pegar ste cdigo. Obvio, no?

<script type='text/JavaScript'></script> <div class="UNIQUENAME"> <a href='javascript:desplegar("UNIQUENAME");'> <img borde='0' height='35' src='http://URLdelaimagen' width='35'/></a> <ul class='ocultar_menu' id="UNIQUENAME"> En este espacio pon todo lo que desees esconder y que aparezca slo al clicar en leer ms, puedes poner texto, imgenes, vdeos... </ul></div>

En http://URLdelaimagen pon la direccin de la imagen que vayas a emplear. Por ltimo, si en lugar de emplear una imagen que ponga leer ms, deseas que aparezca con letras, emplea este cdigo:

<script type='text/JavaScript'></script> <div class="UNIQUENAME"> <a href='javascript:desplegar("UNIQUENAME");'> Leer ms o el texto que quieras</a> <ul class='ocultar_menu' id="UNIQUENAME"> En este espacio pon todo lo que desees esconder y que aparezca slo al clicar en leer ms, puedes poner texto, imgenes, vdeos... </ul></div> Sustituye Leer ms o el texto que quieras por el texto que t desees. Todo listo. Cdigo extrado gracias a chatarrasclub.

13
Para poner tu firma o una imagen al final de cada entrada en tu blogspot sigue los siguientes pasos:

1) Ves a Diseo 2) Edicin de HTML 3) Marca la casilla "expandir artilugios" 4) Busca <data:post.body/> (teclea Ctrl + F para buscar ms rpido) 5) Justo debajo pega el siguiente cdigo Cdigo a copiar/pegar<p><div align="left"><img src="http://urldelaimagen"/></div></p> El left indica que aparecer al pie de la entrada a la izquierda. Si quieres que quede centrado pon center, y si quieres a la derecha pon right. Ya slo te queda cambiar urldelaimagen por la direccin de la imagen que vayas a emplear como firma o como imagen decorativa. Queda a tu eleccin. 6) Clica en vista previa y si todo est bien, guarda tu plantilla.

14
Cmo poner una imagen de fondo en las entradas de blogger? Si te lo has preguntado o crees que te lo vas a preguntar alguna vez, presta atencin a esta entrada. Para poner una imagen de fondo que aparezca en todas las entradas de tu blogspot, haz lo siguiente: 1) Vamos a Diseo 2) Edicin de HTML 3) Busca en tu plantilla #main-wrapper (teclea Ctrl + F para buscar ms rpido). 4) Justo debajo pega el siguiente cdigo:
Cdigo a copiar/pegarbackground: url(http://www...jpg) repeat-y; En el enlace de color rojo debes poner la direccin de la imagen que siempre quieres que aparezca como fondo en las entradas. Dependiendo de tu plantilla y de la fotografa que elijas, tendrs que aadir un margen. Para ello emplearemos el valor padding. Para especificar en dnde queremos que comience el margen aadiremos a padding lo siguiente: -left (marge a la izquierda) -right (margen a la derecha) -top (margen arriba) -bottom (margen abajo) Por ejemplo, si necesitamos un margen a la izquierda sera as:

Cdigo de ejemplobackground: url(http://www...jpg) repeat-y; padding-left:70px; Tendremos que cambiar el valor 70px por el valor que necesitemos para que se vea correctamente. 5) Antes de guardar nada, clica en vista previa, y si todo est bien guarda tu plantilla. Mira un ejemplo:

Si te fijas, el margen (padding) est aplicado a la izquierda para que el texto quede correctamente centrado.

Tambin puedes poner una imagen de fondo slo en una entrada en concreto.

15
Mi amigo Jordi de larvatecnologica me recomend esta pgina que sirve para crear un gadget con las ltimas entradas de nuestro blogspot. Implementarlo en nuestro blog es muy fcil y os he creado un tutorial, como siempre hago, para que no tengis problemas al ponerlo en vuestro blogger. Para ponerlo en tu blog sigue estos pasos: 1) Visita la web de splash. Entra en :

2) Tendrs que crearte una cuenta. Para ello completa los siguientes datos:

3) Una vez creada tu cuenta, debers iniciar sesin. Para ello inserta tu email y tu password y clica en Logging in.

4) Una vez loggeado clica en Create a new gadget.

Inserta la direccin de tu blog y el ttulo que quieras darle a este gadget. Tambin puedes optar poner ponerle una descripcin o unas etiquetas (tags). Elige el lenguaje, en este caso Espaol y por ltimo tienes la opcin de poder monetizar este gadget con publicidad (cuadro rojo). En este caso, el tutorial seguir sin haber elegido esa opcin. 5) Cuando hayas pulsado en Next Step >> aparecers en otra pantalla en la que tendrs que aadir tu Feed. Si recuerdas, ya expliqu como crear una cuenta de Feedburner. Inserta la direccin de tu Feed, clica en Add my feed y luego en Next Step >>

6) Apareceremos ahora en una pantalla para editar el gadget a nuestro gusto. Si tienes dudas clica en la imagen para ver las explicaciones.

7) Por ltimo, clica en Validate and get my code, copia el cdigo HTML que te

aparezca y para instalarlo ves a Diseo->Elementos de pgina->Aadir un gadget>HTML/Javascript.

Todo listo. Espero que sea tu agrado el resultado.

Si quieres centrar este gadget, recuerda conmigo como centrar gadgets en blogger.