Cosas Para Blogueros: Recursos Blog

BloggerPlugins tiene un increíble script con el que se pueden establecer resúmenes automáticos para Blogger. Al script le he hecho varias modificaciones para simplificar el uso y las personalizaciones de éste, además de alivianar el peso del plugin y del código en general.

El tutorial:

Recordar que es importante hacer un respaldo de la plantilla antes de hacer cualquier cambio.

Paso 1: Añadiendo el script en la plantilla:

En "Diseño | Edición HTML" deberás marcar la casilla "Expandir plantillas de artilugios". Deberás buscar la siguiente línea:

/head

Arriba de ésta pega el siguiente código:

script type='text/javascript'
var thumbnail_mode = "float" ;
summary_noimg = 420;
summary_img = 380;
/script
script src='http://yourjavascript.com/4613105437/entradas-resumidas.js.txt.js' type='text/javascript'/

Paso 2: Añadiendo los resúmenes automáticos en Blogger:

Ahora, deberás buscar la siguiente línea:

div class='post-body entry-content'

Si no la encuentras busca la siguiente:

div class='post-body entry-content' expr:id='"post-body-" + data:post.id'

Nota: Si no encuentras ninguna de las 2, entonces busca el /div que contenga dichas clases (Es decir: post-body entry-content)

Arriba de esta línea deberás pegar el siguiente código:

!-- resúmenes inicio --
b:if cond='data:blog.pageType == "index"'style.post-body {display:none;} .resumen {display:block;} /style/b:if

b:if cond='data:blog.pageType == "item"'style.post-body {display:block;} .resumen , .enlace-salto {display:none;} /style/b:if

b:if cond='data:blog.pageType == "static_page"' style.post-body {display:block;} .resumen, .enlace-salto {display:none;} /style/b:if

div expr:id='"summary" + data:post.id' class="resumen"data:post.body//div

script type='text/javascript'
createSummaryAndThumb("summarydata:post.id/");
/script

div style='clear: both;'/
a class='enlace-salto' expr:href='data:post.url' rel='bookmark'Leer más/a

!-- resúmenes fin --

Paso 3: Aplicando CSS:

En este paso es necesario que apliques flotaciones, dimensiones y todo lo que desees para hacer que las entradas resumidas se vean de forma correcta. Como me encargué de editar el script, los ID's nuevos para crear los atributos son los siguientes:

#resumen-entrada {/*Aplica acá los atributos al resúmen/texto*/
}
#imagen-entrada {/*Aplica los atributos al contenedor de la imagen del post*/
}

#imagen-entrada img { /*Los estilos alojados acá modificarán la imagen del contenedor*/
}
.enlace-salto {/*Corresponde al enlace "Leer más"*/
}

Ahora bien, les dejo este código ya elaborado para que no sea necesaria tanta intervención, llevan comentarios destacados en verde para que puedan entender más fácilmente:

#imagen-entrada {
width:150px;/*Reemplaza este valor por el ancho que tendrá la miniatura*/
height:150px;/*Reemplaza este valor por el alto que tendrá la miniatura*/
overflow:hidden;/*Permite ocultar la imagen cuando ya no haya espacio en el cuadro*/
float:left;/*Cambiar por right para cambiar la imagen a la derecha*/
border:5px solid #fff;/*Color y tamaño del borde*/
box-shadow: 0 0 1px #222;/*Sombra tenue en los bordes del cuadro*/
}
#imagen-entrada img {/*Algunos valores impresindibles para que la imagen se vea correctamente*/
min-width:150px;/*Ancho mínimo de la imagen, para no dejar espacios en blanco si es muy pequeña*/
min-height:150px;/*Altura mínima de la imagen, para no dejar espacios en blanco si es muy pequeña*/
}
#resumen-entrada {
float:right;/*Cambiar por left para alinear el resúmen a la izquierda*/
width:400px;/*Ancho del resúmen*/
}
.enlace-salto {
background:orange;/*Color del fondo enlace*/
color:#fff; /*Color del texto*/
padding:5px;/**/
border-radius:5px; /*Bordes redondeados*/
float:right;/*Orientación*/
}