Últimas entradas con imagen miniatura, por categoría o etiqueta
Una de esas cosas que podemos tener fácilmente es mostrar "las útimas entradas con imagen miniatura", por medio del widget de "lista de Blogs", ya que ese widget funciona con los feeds.
Hace tiempo Rosa, (que en paz descanse) publicó una entrada, en donde explicaba como mostrar las últimas entradas, usando este widget, ahora veremos, como mostrar las últimas entradas, de cierta categoría o etiqueta, usando ese widget.
Esto puede ser muy útil, cuando queremos mostrar las últimas entradas de cierto contenido, por ejemplo, vamos a suponer que tienes un blog de recetas, y quieres publicar las últimas entradas de la etiqueta: "pasteles", o que tengas un blog de manualidades y quiere mostrar las ultimas entradas de la etiqueta: "fieltro", en cualquier caso, lo podemos lograr, de este modo que a continuación se explica.
Cómo hacerlo paso a paso...
Paso 1: Desde tu escritorio, ve a Diseño ► Elementos de la página, en la nueva interfaz de Blogger, (en Blogger in Draft) ve a Diseño.
Paso 2: Agrega el widget de "Lista de Blogs":
Paso 3: Configúralo para que muestre:
Deberás repetir esto, las veces necesarias según el número de entradas que quieras mostrar; cambiando el valor de start-index; tomando en cuenta que, cuando dice: "1", mostrará la última entrada con esa etiqueta, para leer la anterior en lugar de 1, pondrás 2, luego para la anterior a esa 3 y así sucesivamente.
Por ejemplo, esta es mi etiqueta de "Explorando Blogger", y si la usará, la escribiría así:
Explorando%20Blogger
Paso 6: Luego necesitamos un poco de CSS, para eliminar el título del Blog, en cada artículo, también agregue otro poco de CSS básico, para que puedan personalizar el widget, y para agregarlo, lo pegan en Añadir CSS, desde el diseñador de plantillas (al hacerlo así, pueden editar el CSS añadido ahí mismo, las veces que quieran, y sin ingresar al HTML de la plantilla):
<div class='item-thumbnail'>
Inmediatamente después viene esta linea:
<a expr:href='data:item.blogUrl' target='_blank'>
La cambiamos por esta:
También, si no queremos que se abra en una nueva ventana, al hacer click sobre esta, eliminamos:
target='_blank'
Paso 9: Checamos en vista previa, y si todo luce bien, guardas los cambios.
¿y el DEMO?
Lo puedes ver ahora mismo en mi blog en últimas Plantillas, en mi caso, estoy mostrando la imagen miniatura y el título de la entrada...
Actualización: 08/01/2011. Agregue otro parámetro que es &max-results=1, para evitar que se repita la misma entrada.
Esto puede ser muy útil, cuando queremos mostrar las últimas entradas de cierto contenido, por ejemplo, vamos a suponer que tienes un blog de recetas, y quieres publicar las últimas entradas de la etiqueta: "pasteles", o que tengas un blog de manualidades y quiere mostrar las ultimas entradas de la etiqueta: "fieltro", en cualquier caso, lo podemos lograr, de este modo que a continuación se explica.
Cómo hacerlo paso a paso...
Paso 1: Desde tu escritorio, ve a Diseño ► Elementos de la página, en la nueva interfaz de Blogger, (en Blogger in Draft) ve a Diseño.
Paso 2: Agrega el widget de "Lista de Blogs":
- Título del el elemento más reciente
- Miniatura del elemento más reciente
...y también si quieres, puede agregar el "Fragmento del elemento más reciente", y la fecha de la última actualización, pero no el ícono.
Paso 4: Ahora, has click en Agregar un blog a tu lista y agregarás el siguiente enlace, para obtener el feed de la etiqueta que nos interesa:http://MI-BLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?start-index=1&max-results=1Con ese enlace, se pueden obtener los Feeds de una etiqueta, y con el parametro: start-index podemos especificar el orden del contenido a mostrar; cambia, lo que esta marcado de rojo, donde dice: ETIQUETA, escribes el nombre de la etiqueta.
Deberás repetir esto, las veces necesarias según el número de entradas que quieras mostrar; cambiando el valor de start-index; tomando en cuenta que, cuando dice: "1", mostrará la última entrada con esa etiqueta, para leer la anterior en lugar de 1, pondrás 2, luego para la anterior a esa 3 y así sucesivamente.
Nota: Cuando uses una etiqueta con más de una palabra, escribes en medio de estas: %20
Por ejemplo, esta es mi etiqueta de "Explorando Blogger", y si la usará, la escribiría así:
Explorando%20Blogger
Paso 5: Guarda los cambios.
Paso 6: Luego necesitamos un poco de CSS, para eliminar el título del Blog, en cada artículo, también agregue otro poco de CSS básico, para que puedan personalizar el widget, y para agregarlo, lo pegan en Añadir CSS, desde el diseñador de plantillas (al hacerlo así, pueden editar el CSS añadido ahí mismo, las veces que quieran, y sin ingresar al HTML de la plantilla):
#BlogList1 h2 { /*El título del widget*/margin:0;
padding: 0;
background: url(tu-imagen.gif) no-repeat left top;
}
#BlogList1 ul{
margin: 0;
padding: 0;
width: 100%;
}
#BlogList1 .blog-title {
display: none; /*importante, eliminamos el título del Blog*/
}
#BlogList1 .item-title{ /*El título de cada artículo o post*/ margin:0;
padding:0;
}
#BlogList1 li img { /*La imagen miniatura de cada post*/ background-color: #ffffff; /*ponemos fondo*/
padding: 4px;
margin: 0;
}
#BlogList1 ul li { /*estilos de cada elemento de la lista*/ border-bottom: 1px dashed #cccccc; /*el borde*/
padding: 6px 0 0 0;
margin: 0;
}
#BlogList1 ul li a {
color: #7796d0; /*El color de el enlace*/
}
#BlogList1 ul li a:hover {
color: #7796d0; /*El color de el enlace al poner el puntero encima*/
}
Paso 7: Guarda los cambios, en APLICAR AL BLOG.
Paso 8: Finalmente, lo que resta es cambiar la URL en el código del widget, ya que, cuando se haga click sobre la imagen miniatura, nos llevará a la página de la etiqueta en cuestión (la que estamos usando) , y para ello, vamos a la edición de HTML de la plantilla, marcamos la casilla de expandir plantilla de artilugios, luego, buscamos, con la ayuda de "ctrl F", la siguiente linea:<div class='item-thumbnail'>
Inmediatamente después viene esta linea:
<a expr:href='data:item.blogUrl' target='_blank'>
La cambiamos por esta:
<a expr:href='data:item.itemUrl' target='_blank'>Al cambiarla, al hacer click sobre la imagen miniatura, iremos a la "entrada de esa imagen".
También, si no queremos que se abra en una nueva ventana, al hacer click sobre esta, eliminamos:
target='_blank'
Paso 9: Checamos en vista previa, y si todo luce bien, guardas los cambios.
¿y el DEMO?
Lo puedes ver ahora mismo en mi blog en últimas Plantillas, en mi caso, estoy mostrando la imagen miniatura y el título de la entrada...
Actualización: 08/01/2011. Agregue otro parámetro que es &max-results=1, para evitar que se repita la misma entrada.
Etiquetas:Tutoriales