Desde hace un tiempo atrás, Blogger nos ha avisado que ya está disponible su nuevo widget o gadget de Entrada destacada. Hoy vamos a ver cómo agregarlo a nuestro blog y cómo personalizarlo un poco.
AGREGAR EL GADGET
Para agregar este gadget a nuestro blog, sólo seguimos estos pasos:
1.§ Vamos a Diseño - Añadir un gadget y elegimos el gadget Entrada destacada.
2.§ Tendremos un panel con distintas opciones: podemos ponerle un título al gadget o no; mostrar el título de la entrada destacada, mostrar un fragmento del mismo y mostrar la imagen.
Luego, seleccionamos la entrada que queremos destacar y al lado derecho veremos una vista previa del gadget, tal como se verá en el blog.
3.§ Finalmente, cuando hayamos terminado, damos clic en Guardar.
PERSONALIZAR EL GADGET
Los siguientes pasos son opcionales, con los pasos anteriores, el gadget ya estará funcionando en nuestro blog; pero si queremos cambiar un poco el estilo de nuestro gadget, podemos seguir estos pasos adicionales:
1.§ Vamos a Plantilla - Editar HTML.
2.§ Damos un clic dentro del código de la plantilla, luego presionamos la combinación de teclas CTRL+F y en la casilla search buscaremos la etiqueta de cierre ]]></b:skin>
3.§ Sobre la etiqueta, pegaremos los siguientes estilos CSS:
Cada parte del gadget podemos personalizarla a nuestro gusto. Yo agregué un borde a la imagen; cambié la fuente del título de la entrada destacada y puse en cursiva el fragmento de la entrada, pero cada uno puede cambiar los estilos como prefiera, agregando otros estilos de bordes u otros colores.
4.§ Cuando terminemos, damos clic en Guardar plantilla. Como ven, fue muy sencillo darle un poco de estilo al gadget.
AGREGAR EL GADGET
Para agregar este gadget a nuestro blog, sólo seguimos estos pasos:
1.§ Vamos a Diseño - Añadir un gadget y elegimos el gadget Entrada destacada.
2.§ Tendremos un panel con distintas opciones: podemos ponerle un título al gadget o no; mostrar el título de la entrada destacada, mostrar un fragmento del mismo y mostrar la imagen.
Luego, seleccionamos la entrada que queremos destacar y al lado derecho veremos una vista previa del gadget, tal como se verá en el blog.
3.§ Finalmente, cuando hayamos terminado, damos clic en Guardar.
PERSONALIZAR EL GADGET
Los siguientes pasos son opcionales, con los pasos anteriores, el gadget ya estará funcionando en nuestro blog; pero si queremos cambiar un poco el estilo de nuestro gadget, podemos seguir estos pasos adicionales:
1.§ Vamos a Plantilla - Editar HTML.
2.§ Damos un clic dentro del código de la plantilla, luego presionamos la combinación de teclas CTRL+F y en la casilla search buscaremos la etiqueta de cierre ]]></b:skin>
3.§ Sobre la etiqueta, pegaremos los siguientes estilos CSS:
.post-summary img{ /* estilos imagen */
background: #ffffff;
padding: 4px;
border: 1px solid #BEBEBE;
}
.post-summary h3{ /* estilo título entrada destacada */
font-size: 22px;
font-family: 'Sue Ellen Francisco' ;
}
.post-summary p{ /* estilo fragmento de entrada */
font-style: italic;
}
Cada parte del gadget podemos personalizarla a nuestro gusto. Yo agregué un borde a la imagen; cambié la fuente del título de la entrada destacada y puse en cursiva el fragmento de la entrada, pero cada uno puede cambiar los estilos como prefiera, agregando otros estilos de bordes u otros colores.
4.§ Cuando terminemos, damos clic en Guardar plantilla. Como ven, fue muy sencillo darle un poco de estilo al gadget.
