Saltar al contenido
TutoEspacio

Cómo poner la imagen completa del post en tu página de inicio en Blogger sin Javascript

A veces navegando por la internet nos hemos topado con blogs que en su página de inicio se muestra la imagen completa de cada entrada, me paso con unos de mis blogs y desde ahí empecé a investigar un poco más sobre esto, porque quería implementarlo en mi blog ya que le da un aspecto más bonito que tener una imagen cortada de 72px. Esto se puede hacer con CSS pero esta vez dejaremos a un lado los CSS y lo haremos solo con las tags que son las etiquetas que nos proporciona blogger.

Un ejemplo de estas etiquetas es que si queremo mostrar un fragmento del contenido de las entradas, s√≠mplemente recurriremos a la etiqueta <data:post.body/>, o tambien existen otras como por ejemplo la etiqueta que nos sirve por si necesitamos mostrar el t√≠tulo de √©sta, a√Īadimos <data:post.title/> a nuestro c√≥digo.

Los anteriores solo fueron dos ejemplos pero como esos hay muchos m√°s, en este tutorial lo que vamos a lograr que se muestre la imagen completa en nuestra p√°gina de inicio de blogger. En Blogger tambi√©n podemos obtener la imagen en miniatura de la entrada, pero s√≥lamente la obtendremos a un tama√Īo de 72 p√≠xeles, y eso en lo personal se ve feo.

Solución para poner la imagen completa en página de inicio

Si tenemos nuestro blog donde nos aparecen im√°genes cuadradas y cortadas es porque estamos usando la etiqueta de <data:post.thumbnailUrl/> para obtener la imagen en miniatura, entonces la soluci√≥n es optar por utilizar <data:post.firstImageUrl/>, la cual devolver√° la primera imagen de la entrada en su tama√Īo real y no cuadrada ni cortada.

Para utilizarla bastaría con ir la siguiente ruta: Plantilla Editar HTML. Aquí presiona Ctrl + F y buscar la siguiente línea <data:post.thumbnailUrl/>, nos aparecerá algo como esto:

<a expr:href=’data:post.url’>
<script type=’text/javascript’>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>

El código anterior varía depende de la plantilla pero solo hay que ubicarla y la sustituimos por <data:post.firstImageUrl/> y quedaría de la siguiente manera:

<a expr:href=’data:post.url’>
<script type=’text/javascript’>
document.write(bp_thumbnail_resize("<data:post.firstImageUrl/>","<data:post.title/>"));
</script>
</a>

Ahora lo que resta sera visualizar la p√°gina de inicio de nuestro blog e ir ajustando la imagen depende que tan grande la queramos. Esto lo puedes hacer yendo a tu blog posicionarte sobre la imagen, dar clic derecho y despues en inspeccionar, de lado derecho aparecer√°n las propiedades y solo hay que moverlas a nuestro gusto y despues aplicar los cambios en nuestra plantilla.

Espero que este tutorial haya sido de tu agrado y si te sirvio no olvides compartir que nos ayuda mucho. Visita nuestro Canal en Youtube y Suscribete!.De igual forma puedes dejar tu comentario por si tienes dudas.
No olvides seguir visitando TutoEspacio.