Blog de Pruebas: Truco Leer más o readmore en blogger

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. A picture of the World

Latest Posts

Truco Leer más o readmore en blogger

Filled under : Blogger , Trucos Blogger

Una de las aplicaciones que considero mas importantes en Blogger, sin duda alguna es la de "Leer más" o "Readmore" ya que nos da muchas ventajas como son:

Mostrar las primeras lineas de cada uno de nuestros post a manera de resumen
Ayuda a tener un Blog bastante ordenado y presentable
Nuestros lectores (¬¬) pueden ver más de un post en la pantalla sin tener que bajar con la barra de desplazamiento.

Este truco lo vi en ChicaBlogger, sólo que ahora lo presento con algunas modificaciones, ya que le inclui un marco a las imágenes y justificación al texto resumido, para que nos quede todavía más estético.

Instrucciones.

(recuerda que uno de los mandamientos de todo buen blogger es que guardaras una copia de seguridad de tu plantilla, antes de cualquier experimento).

1.- Nos vamos a Diseño >> Edicion de HTML y en nuestra plantilla buscamos:
(Copia y pega)

</head>

y antes de esta etiqueta pegamos el siguiente código:
(Copia y pega)


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script src='http://sites.google.com/site/isaiasgah/script/summary-post-v20-test.txt?attredirects=0' type='text/javascript'/>

2.- Expandimos Plantilla de artilugios, esto lo conseguimos seleccionando la casilla que se encuentra en la parte superior de la plantilla:

Ahora buscamos:
(Copia y pega)

<data:post.body/>

Lo borramos y reemplazaremos por el siguiente código:
(Copia y pega)


<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

Damos clic en vista previa y verificamos que funcione perfectamente.

Con estos sencillos pasos ya tenemos configurada esta aplicación en automático en todos nuestros post, ahora pasemos a la configuración del texto y las imágenes mostradas, esto desde luego es de manera opcional.

summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes .
summary_img = determina el número de caracteres a mostrar en caso de que el post tenga imágenes.
img_thumb_height = alto de la imagen.
img_thumb_width = ancho de la imagen.

Ahora, si queremos que las imágenes tengan un marco, buscamos en nuestra plantilla .post img { (en caso de que no exista hay que agregarlo) y le agregamos los siguientes valores:

.post img {
padding:4px;
background-color: #f5f5f5;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}

Y para que el texto esté justificado, vamos a .post-body { (mismo caso que el anterior, si no existe, lo agregamos) y ponemos los siguientes valores:

.post-body {
margin:0 0 .75em;
text-align: justify;
line-height:1.6em;
}

Y listo, hemos terminado, puedes dar vista previa para ver los cambios y si es de tu agrado entonces guardamos la plantilla, la siguiente imagen es una muestra de como debe quedar nuestra nueva aplicación:

Espero les sea muy util.

Te gustó? Twittealo!

Entrada realizada por:Isaias Arredondo

Tags: Blogger , Trucos Blogger