Agregar una Imagen destacada en blogger

En una que otra ocasión tenemos la necesidad de querer agregar una imagen diferente para la página principal de nuestro blog y otra para la entrada en sí. En wordpress podemos lograr esto de una manera sencilla y sin mucho esfuerzo, pero en blogger ya es otra cosa, en éste artículo te mostraré como poder agregar una imagen destacada en blogger de una forma muy sencilla. Así que sin más que decir, ¡¡Empecemos!!

Método

Cómo decía anteriormente en wordpress basta con hacer unos click y ya tenemos imagen destacada, pero en blogger no es así de fácil, para poder lograr esto necesitamos de un pequeño hack que nos permitira recrear lo que se hace en wordpress, esto lo logramos usando una imagen que solo usaremos como imagen destacada en las diferentes secciones del blog y ocultando dicha imagen del artículo en sí. Este hack se basa en ocultar la imagen destacada mediante css, a continuación te dejo el código para poder hacerlo fácilmente.

1 - Ocultar la imagen de los artículos con atributos html inline

Ya sabiendo que necesitamos css para poder lograr lo que queremos, basta con agregar el siguiente código HTML a la imagen que queremos usar como destacada:

<img src="{URL_IMAGEN_DESTACADA}" style="display: none;"/>

Dónde {URL_IMAGEN_DESTACADA} será la url de la imagen que queremos usar como destacada. El atributo style de HTML nos servirá para poder agregar un display: none;, esto lo que hará es ocultar la imagen que queremos solo se muestre como imagen destacada.

Está de más decir que la imagen debe ir al principio del cuerpo de la entrada para que ésta funcione correctamente.

2 - Ocultar la imagen de los artículos con estilos

Si bien no hay diferencia entre esta forma y la anterior, es recomendable hacerlo de esta forma si no queremos tener estilos inline en nuestro documento HTML. Ve a tema y dale click a la pestaña editar HTML y busca el siguiente código: </b:skin> y justo arriba de éste, pega el siguiente código css:

/* Imagen destacada  */
.kr-hidden-img {
    display: none;
}

Ahora para poder hacer uso del estilo css, nos basta con agregarlo al código html <img> como se muestra a continuación:

<img src="{URL_IMAGEN_DESTACADA}" class="kr-hidden-img"/>

Ya solo debes simplemente agregarlo al principio de todo el contenido de tu artículo cuando lo estés creando o editando. Ten presente que para hacer uso de código HTML en blogger, debes darle click a la pestaña HTML.

Bueno, eso sería todo por ahora. Si te ha sido de ayuda el artículo o tienes algunas dudas, puedes dejar tu comentario abajo. Si puedes, te invito a que compartas la entrada en redes sociales, eso me ayudaría mucho. ¡Hasta pronto!

Otros artículos que quizá te gusten.

cargando...

Comentarios

Publicar un comentario