Como muchos notaran, no tengo tiempo para administrar el blog como antes. Mi principal problema era actualizar el gadget de las ultimas reseñas, porque efectivamente, cada que escribía una, tenía que actualizar el gadget poniendo la imagen y el link de la reseña, me era imposible, de hecho podían pasar hasta cuatro reseñas y nunca lo actualizaba. Me sentía fatal.
Entonces, "creé" un gadget que se actualiza solito. Como el que ven actualmente en el blog. Obviamente no escribí el código yo sola, la mayor parte lo copié de otra página que lo utilizaba para otro fin, y no estaba tan bonito e.e
Lo comparto, no con la finalidad, de guárdalo para mí y así ya no tener que hacer todo de nuevo porque lo olvidé (como me ha pasado cada vez que cambio de plantilla) por supuesto que no, sino para también facilitarle la vida a ustedes, sí les gusta.
Como primer paso les recomiendo crear una copia de su platilla actual, por sí no les llega a salir algo bien, pueden regresar a la anterior sin ningún problema.
En este tutorial, solo son tres pasos, la clave está en poner lo códigos exactamente donde les digo, ni una línea antes, ni una después.
1.-Entran en Diseño, después Edición de HTML y antes de ]]></b:skin> pegan el código.
Para buscar ]]></b:skin> más fácilmente, dan un click dentro del código y presionan CTRL+F y les va a salir un cuadro de busqueda, ahí pegan ]]></b:skin> y los mandará directo. Sí no dan click dentro del código, NO les abrirá el cuadro de busqueda.
Cuando ya lo hayan localizado, ANTES de ]]></b:skin> van pegar el siguiente código:
Luego van a volver a ocupar el cuadro de busqueda, ponen </head> y ANTES pega este script:
Como ultimo paso, vamos a crear nuestro gatget en la barra lateral, para esto entran en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
Para que este código funcione en todas tus reseñas, cada vez que la publiques tendrás que poner la etiqueta "reseña", y la entrada aparecerá automáticamente en la barra lateral.
PERSONALIZACIÓN
Poner los códigos en la plantilla es lo más fácil, lo difícil, es que quedé bonito, y como tu quieres. Así que continuación explico los códigos, y dejo algunos ejemplos por sí quieren ocuparlos. El código más importante es el primero que pusimos, porque es aquí donde ustedes pueden personalizar a su gusto. El código que ustedes acaban de poner, va dejar algo así:
/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
Height y width, como dice ahí, maneja el ancho y alto de las imágenes, si las quieren más grandes tendrán que cambiar los valores o otros más grandes.
Ahora yo lo edité, para poner algunos detalles:
/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
Img.label se refiere todo lo referente a la imagen de muestra de nuestra reseña.
Float: left, se refiere a la posición en la que va estar la imagen, en este código esta a la izquierda, si lo cambiamos a "right" cambiaría hacia la derecha.
En border, se edita el contorno de la imagen; 1px se refiere al grosor del contorno, "solid" al tipo de borde y #8f8f8f al color. Los tipos de contorno pueden ser lo siguientes: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
Height y width, como dice ahí, maneja el ancho y alto de las imágenes, si las quieren más grandes tendrán que cambiar los valores o otros más grandes.
Ahora yo lo edité, para poner algunos detalles:
Le agregué una opción para redondear las imágenes, border-radius: 100px; y otra para que la imagen sea opaca y al pasar el cursor se iluminé. A continuación les dejo algunos modelos que pueden utilizar, recordandoles, que este código es el primero, el que va antes skinn.
OPCIÓN UNO
OPCIÓN DOS
OPCIÓN TRES
Espero que me hayan entendido, y que les gustes las opciones, si tienen alguna duda déjenla en los comentarios. El código 3, también se puede editar, en este solo vienen los ajustes de la entrada, como comentarios, fecha, número de post a mostrar etc, léanlo y se darán cuenta que le entienden, pero bueno, de todas formas, así tal cual les he puesto los códigos, quedan igualitos que en las imágenes miniaturas, ya si quieren algo extra, me pueden preguntar.
