Llegó el verano: un fondo relajante para tu blog

En pleno verano muchos no tenemos vacaciones, puesto que tenemos otras obligaciones que atender como los estudios, familia y otras preocupaciones más. Tal vez sea un buen momento para relajarnos y prestar un poco de atención a nuestro cuerpo y su armonía, ya sea mediante técnicas relajantes variopintas o mediante kinesiologia de kineteam y demás técnicas terapéuticas.

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 Diseño
2) Edición de HTML
3) Buscar en tu plantilla #main-wrapper (teclea Ctrl + F para encontrarlo más rápido).
4) Justo debajo pega el siguiente código:

Código a copiar/pegar

background: url(http://www...jpg) repeat-y;

En el enlace de color rojo debes poner la dirección 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 tendrás que añadir un margen. Para ello emplearemos el valor padding. Para especificar en dónde queremos que comience el margen añadiremos 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 sería así:

Código de ejemplo

background: 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?

Cómo poner vídeos de YouTube en Blogger

Si has empezado recientemente con tu blog quizá te estés preguntando por cómo poner vídeos de Youtube en tu blog. Quizá sea algo muy básico y fácil para unos, pero a día de hoy es algo desconocido para otros. Por eso, hoy, aprenderemos a añadir vídeos de YouTube en nuestro Blogspot.

Una vez hayamos buscado videos en el YouTube y tengamos claro cuál queremos adjuntar en nuestra bitácora, seleccionamos la opción de Insertar. Copiamos el código embed (ratón botón derecho, copiar):

Luego la pegamos en la entrada de nuestro blog. Clica en vista previa antes de publicar si deseas apreciar cuál 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, vídeos con tutoriales, vídeos de alguna noticia reciente, o sobre el tema que quieras tratar en tu blog. Dicen que una imagen vale más que mil palabras. Por tanto, un vídeo todavía más, ¿no crees?

Aquí tienes un ejemplo del resultado:

"Acerca del autor" Información del autor al final de cada entrada en Blogger

Esta es una de las tantas ventajas que Wordpress tiene ante Blogger, es decir, la posibilidad de incluir información del autor al final de cada entrada, el clásico "Acerca del autor", de manera que los lectores sepan quién redacta cada artículo y sepan más 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 diseño/Edición de HTML, expandimos artilugios, y buscamos el siguiente código 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 código:


<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 descripción del autor.</p>

</div>

Lo que está en verde (URL del Avatar) es donde debemos agregar la dirección de la imágen a utilizar, recuerda que la dirección debe terminar como imagen, ya sea .jpg , .gif, .png, etc. Y en la parte Azul, debemos redactar una breve descripción 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; /* Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño 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 sería algo así:

¿Pero qué pasa si hay más autores en nuestro blog?
El procedimiento es similar, pero cambian los códigos, es decir a contar desde el paso 2, pegamos el siguiente código:


<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='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>

<p>Aquí escribimos una breve descripción 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; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Aquí escribimos una breve descripción del autor.</p>

</b:if>

Como vemos, los cambios no son muchos, en caso de haber más autores, se utiliza el mismo código 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 tendría este aspecto:

Blogger incorpora sus propios iconos para compartir contenido en redes sociales

Blogger sigue mejorando día a día. Si hace poco nos sorprendía con sus estadísticas, 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 Diseño
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.

Cómo numerar las páginas en Blogger (II)

Prácticamente en los inicios de este blog ya explicamos cómo numerar las páginas en Blogger, con ello conseguíamos un diseño 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 paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:

<!-- 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/slider_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 código:

<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/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Observaciones:
var postperpage=7;   -> Indica el número de entradas por página.
var numshowpage=6;   -> Indica el número de páginas que se mostrarán 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;max-results=7&quot;' De esta forma estaremos editando la paginación en las etiquetas o categorías (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 página web que permita subir archivos javascript.

Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.

Añadir separadores entre las entradas en Blogger

Jéssica de Diversidad y variadas explicó de forma excepcional cómo 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 añadir este tipo de separadores en tu blog deberás hacer lo siguiente:

1) Ves a Diseño
2) Edición de HTML
3) Busca en tu plantilla el código .post { (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás algo así (depende de tu plantilla):

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

5) Antes del final, concretamente antes de }, añade el siguiente código:

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 debería 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 encontrarás 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 también 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.

---

Cómo enmarcar las entradas y los elementos de la sidebar por separado

Hace tiempo me preguntaron cómo había conseguido que en mi sidebar cada elemento se mostrase como un bloque individual, por eso voy a tratar de explicar lo mejor posible cómo conseguirlo, aunque con la variante que también explicaré cómo hacerlo con cada post (entrada). Sin duda es una buena opción para mejorar el diseño de nuestros queridos blogspot.


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

1) Ves a Diseño
2) Edición de HTML
3) Busca el código .post { (teclea Ctrl + F para buscar más rápido)
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 línea de border hace referencia al borde que recorrerá cada entrada individual. Si quieres más información sobre los bordes puedes visitar la siguiente entrada: Bordes en Blogger.

Padding es la separación o distancia que habrá entre el borde y el comienzo del texto. Margin es la distancia de separación entre el borde y la parte exterior del elemento. Cambia los valores de padding y margin según tus necesidades y la estructura de tu blog. Cada plantilla de Blogger es un mundo. Si te quedan dudas fíjate en esta imagen extraída 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 Diseño
2) Edición de HTML
3) Busca el código .sidebar .widget,  (teclea Ctrl + F para buscar más rápido)
4) Debajo de él pega lo siguiente:

  .main .widget {
  border:1px solid black;
  margin:0 0 1.5em;
  padding: 10px;
 }

Es decir, al final debería 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 explicación de cómo enmarcar las entradas por separado.

5) Clica en vista previa, y si no hay ningún fallo guarda tu plantilla.



Espero que estos dos trucos para Blogger te hayan servido para decorar y diseñar aún más tu blogspot.

Cómo guardar entradas en PDF de un blog

En muchas ocasiones, ya sea por falta de tiempo o porque simplemente no podemos en ese momento, sería ú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 página y escribimos la URL que necesitemos, por ejemplo:

Enlace | pdfmyurl

Imagen al final de las entradas

Poner una imagen al final de cada entrada puede ser una buena opción para personalizar tu blogspot, y una vez más gracias a Gema os voy a explicar cómo hacerlo . Allí puedes poner lo que quieras, como una imagen simpática o simplemente la imagen que tú desees.

Anteriormente ya os expliqué cómo poner vuestra firma en cada entrada, por lo que ésta puede ser otra muy opción para tu blog. Para emplear este truco sigue estos pasos:

1) Ves a Diseño
2) Edición de HTML
3) Busca en tu plantilla .post-footer { (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás con algo así:

5) Antes de } añade:

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 más 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 cámbialo por left.

---

Cómo quitar la fecha de las entradas

Muchos bloggers se preguntan por cómo 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 Diseño->Elementos de página->Entradas del blog->Editar. En editar os encontraréis con la siguiente opción:

Debes dejar la casilla sin seleccionar y posteriormente guardar los cambios. Si con esto aún continua apareciendo la fecha en las entradas, deberás realizar cambios en tu plantilla HTML. Esto puede deberse a que no estés empleando una de las plantillas mínimas que nos facilita Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca date-header (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás con algo así:

---

h2.date-header {
margin:0;
padding:0;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

---

Deberás añadir, respetando la estructura, este código:

---

visibility:hidden;

---

Es decir, deberás 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.

Cómo poner que un vídeo de Youtube se reproduzca solo

Una alternativa a poner música en tu blog que suene nada más se entre en el blog es poner un gadget de un vídeo de youtube, por ejemplo en la sidebar (columna). Para conseguirlo sigue los siguientes pasos.

Cuando quieres poner un vídeo 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 código que copiamos de youtube para ponerlo en nuestro blog tendría la siguiente estructura:

Código de ejemplo

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/zWywb_E3SRA&hl=es_ES&fs=1&"></param><param 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 vídeo se reproduzca solo al entrar en en el blog o en una determinada entrada, después 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 añadir &autoplay=1 quedándonos 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 música y ésta es una de sus mejores canciones, al menos para mí.

¡A disfrutar este truco!

Leer más sólo en entradas determinadas

Emplear siempre la opción de leer más en nuestro blog en ocasiones puede resultar innecesario o incómodo. Por suerte hay otras formas de poner leer más sólo en una entrada. Bajo mi recomendación, si todas tus entradas son largas, es recomendables emplear una de las formas que ya explicamos aquí y aquí. Si por el contrario sólo necesitas en alguna ocasión la opción de leer más ésta es tu entrada.

---

Recuerda siempre hacer copias de tu plantilla para que no tengas que arrepentirte luego de nada.

---

Ejemplo:

Leer más

Para instalar este truco para tu blogspot haremos lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos la parte de nuestra plantilla llamada </head> (tecleamos Ctrl + F para buscar más rápido)
4) Antes de </head> pegaremos el siguiente código:

---

<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 ningún error, guarda tu plantilla.

6) Ahora tenemos dos opciones. Si quieres poner una imagen que ponga Leer más o la imagen que tú quieras, pega el siguiente código en la entrada que vayas a redactar. Recuerda, si no vas a necesitas poner Leer más, no tendrás que pegar éste código. 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 sólo al clicar en leer más, puedes poner texto, imágenes, vídeos...

</ul></div>

---

En http://URLdelaimagen pon la dirección de la imagen que vayas a emplear.

Por último, si en lugar de emplear una imagen que ponga leer más, deseas que aparezca con letras, emplea este código:

---

<script type='text/JavaScript'></script>
<div class="UNIQUENAME">
<a href='javascript:desplegar("UNIQUENAME");'>
Leer más o el texto que quieras</a>
<ul class='ocultar_menu' id="UNIQUENAME">

En este espacio pon todo lo que desees esconder y que aparezca sólo al clicar en leer más, puedes poner texto, imágenes, vídeos...

</ul></div>

---

Sustituye Leer más o el texto que quieras por el texto que tú desees.

Todo listo.


Código extraído gracias a chatarrasclub.

Pon tu firma en las entradas de tu blog

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

1) Ves a Diseño
2) Edición de HTML
3) Marca la casilla "expandir artilugios"
4) Busca <data:post.body/> (teclea Ctrl + F para buscar más rápido)
5) Justo debajo pega el siguiente código

Código 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 sólo te queda cambiar urldelaimagen por la dirección de la imagen que vayas a emplear como firma o como imagen decorativa. Queda a tu elección.

6) Clica en vista previa y si todo está bien, guarda tu plantilla.

Imagen de fondo en todas las entradas de tu blog

¿Cómo 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 atención a esta entrada.

Para poner una imagen de fondo que aparezca en todas las entradas de tu blogspot, haz lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Busca en tu plantilla #main-wrapper (teclea Ctrl + F para buscar más rápido).
4) Justo debajo pega el siguiente código:

Código a copiar/pegar

background: url(http://www...jpg) repeat-y;

En el enlace de color rojo debes poner la dirección de la imagen que siempre quieres que aparezca como fondo en las entradas.

Dependiendo de tu plantilla y de la fotografía que elijas, tendrás que añadir un margen. Para ello emplearemos el valor padding. Para especificar en dónde queremos que comience el margen añadiremos 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 sería así:

Código de ejemplo

background: 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.

---

También puedes poner una imagen de fondo sólo en una entrada en concreto. 

---

Gadget de últimas entradas de Splush

Mi amigo Jordi de larvatecnologica me recomendó esta página que sirve para crear un gadget con las últimas entradas de nuestro blogspot. Implementarlo en nuestro blog es muy fácil y os he creado un tutorial, como siempre hago, para que no tengáis problemas al ponerlo en vuestro blogger.

Para ponerlo en tu blog sigue estos pasos:

1) Visita la web de splash. Entra en :

2) Tendrás que crearte una cuenta. Para ello completa los siguientes datos:

3) Una vez creada tu cuenta, deberás iniciar sesión. 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 dirección de tu blog y el título que quieras darle a este gadget. También puedes optar poner ponerle una descripción o unas etiquetas (tags). Elige el lenguaje, en este caso Español y por último tienes la opción de poder monetizar este gadget con publicidad (cuadro rojo). En este caso, el tutorial seguirá sin haber elegido esa opción.

5) Cuando hayas pulsado en Next Step >> aparecerás en otra pantalla en la que tendrás que añadir tu Feed. Si recuerdas, ya expliqué como crear una cuenta de Feedburner. Inserta la dirección 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 código HTML que te aparezca y para instalarlo ves a Diseño->Elementos de página->Añadir 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.

---