Si quieres modificar tus entradas de Blogger para que solo muestren un resumen de las entras y no toda la entradas o las entradas, como en el caso de un blog con la plantilla antigua y al ir a la página principal te sale todas las últimas entradas pero con el artículo completo. Aqui te mostraré como podemos hacer que solo salga un resumen corto para una mejor y rapida visualización de tu blog. Vaamos a ello.
Bien vas al Html de tu blog o plantilla genral y buscas los siguiente: (nota patra buscar rapido usa las teclas control + F?
Ahora en su lugar coloca lo siguiente..
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.
Ahora busca esta línea:
<b:include data='post' name='post'/>
Igualmente elimínala y en su lugar pon esto:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Ahora antes del cierre de </head> pega lo siguiente:
<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg1;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = summary_img1;
}
var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>
Y debajo de eso pega esto: o borra esta linea y pega todo hasta cierre </bif
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#first { /* Estilos del contenedor del primer post */
margin: 0px 0 10px 7px;
padding: 0px;
width: 610px;
height: 300px;
float: left;
border: 1px solid #1c1c1c;
background: #E6E6E6;
}
.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}
#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:center;
line-height: 1.4em;
}
#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}
#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}
#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}
.post { /* Estilos del contenedor de los mini post */
border: 1px solid #1c1c1c;
float:left;
width: 290px;
height: 210px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow:hidden;
background: #FBEFFB;
}
.rmlink a { /* Estilos del texto Leer más */
color: #39ADCE;
text-decoration:none;
}
h2.date-header { /* Con esto ocultamos la fecha */
height:0px;
visibility:hidden;
display:none
}
.post-footer { /* Estilos del post-footer de los mini post */
text-transform:uppercase;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}
#blog-pager {
clear:both;
}
</style>
</b:if>
</b:if>
-----------------------------------------------------------------------------------
Con todo esto hemos hecho tres cosas, una es aplicar el Leer más automático a todas las entradas, otra es darle un identificador diferente al primer post así como un Leer más exclusivo a la primer entrada, y por último condicionar el tamaño y los estilos de las entradas en la portada.
Ahora vamos a personalizar:
En los dos primeros códigos que hemos agregado aparece en color rojo el texto Leer más... ese se puede cambiar por otro o bien poner una imagen en su lugar, para tal caso se debe eliminar ese texto y poner este código:
<img src="URL de la imagen" />
Sólo agrega la URL de tu imagen donde se indica y listo. Eso deberás hacerlo en los dos texto de Leer más... para que el cambio se vea tanto en la primera entrada como en el resto de ellas.
Después viene la parte del resumen de las entradas. Debajo de </head>, al inicio del script que pegamos se encuentra esta parte:
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;