Resúmenes automáticos

Antes que nada hay que aclarar una cosa muy importante acerca de que son los resúmenes que en este caso se programará automático.
Primeramente un resumen en blogger representa lo que podemos considerar una entradas o publicaciones resumidas en la página inicial que es donde siempre se muestran todas las entradas de manera cronológica, podemos ver que en la página principal de Código Fácil se muestran todas las publicaciones resumidas con su título, etiqueta, imagen y una breve parte del texto que contiene la entrada en sí, así que con esta eplicación ya podemos pasar a lo que es la explicación para lograr hacer un resumen en tu blog de blogger.

Importante: Esto puede no funcionar si no tienes instalada la librería de jQuery
Puedes instalarla agregando <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> antes de </head>

#1Añadir el scrip a tu plantilla antes de la etiqueta

<b:if cond='data:blog.pageType == "index"'>

<script type="text/javascript">

$(document).ready(function() {

      $(".resumen").text(function(index, text) {

            return text.substr(0, 500) +'...'; // Cambia el valor numérico destacado por X carácteres

      });

});

</script>

</b:if>

Deberás de modificar el valor (500) por la cantidad de carácteres que mostrará el scrip.


#2Aplicando correciones

Primero tendrás que buscar el sig. código con tu plantilla pero antes da en "Expandir plantilla de artilugios"

<data:post.body/>

ahora remplaza esa linea por esta

<div class="resumen"><data:post.body/></div>

Nota:

Te recomiendo que siempre que edites tu plantilla directamente antes de guardar los cambios des una vista previa, en este caso al dar la vista previa ya deberías de poder ver el contenido resumido.

#3Incuir thumbnail en los resúmenes "imágen"

Navegando por interet me encontré con una muy buena idea que es el que la imágen sea más grande el el blog de Oloblogger y que adaptandolo a nuestro código sería algo así:

Inserta este código antes del /head

<!-- Reemplazar miniaturas de 72px por otras de tamaño X -->
<script type='text/javascript'>
//<![CDATA[
function redimthumb(url,title,image,size){
var imagen=image;
var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Leer post completo" alt="'+title+'"/></a>';
if(imagen!="") return devolver; else return "";
}
//]]>
</script>

Ahora de bajo del código que ya habíamos insertado en el paso dos "<div class="resumen"><data:post.body/></div>" pondremos el sig.:

<b:if cond='data:blog.pageType == "index"'><div class="thumb-post">
<script type='text/javascript'>document.write(redimthumb("<data:post.url/>","<data:post.title/>","<data:post.thumbnailUrl/>",150));</script>
</div>
<div style="clear:both" />
</b:if>

Nota:

Si el tamaño no es el que quieres puedes modificarlo desde donde dice 150, pero ten cuidado de modificarlo mal por que eso puede alterar la imágen original de la entrada, si es más pequeña de que el tamaño del resumen se verá pixelado.

Solo nos queda alinear la imágen y el contenido de texto, puedes hacer esto insertando el siguiene codigo antes del </head>

<b:if cond='data:blog.pageType == "index"'>

<style type="text/css">

.resumen {

width:400px; /*Cambia el valor por el ancho correcto de tu entrada*/

float:left; /*Cambiar por right para alinear texto a la derecha*/

}



.thumb-post {

float:right; /*Reemplaza por left para alinear imagen a la izquierda*/

width:100px; /*Edita este valor para modificar el contenedor de la imagen*/

}

</style>

</b:if>

#4Extra (opcional): Botón leer más

puedes inserarlo antes o después del código mencionado en el paso 2 o 3 según como quieras.

<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' style="float:right;" expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if>

Espero que les sirva de mucho y por favor cualquier duda o lo que sea coméntenmelo :3 ↓ acá ↓