Leer más con miniatura menos en la primera entrada.

Muchas veces el 'leer más' puede venir muy bien para los blogs, pero en la página principal no suele quedar estéticamente bien, y por eso este tutorial puede ser la solución. Si sigues los pasos siguientes añadirás la opción de leer más en todas las entradas menos en la primera. Puedes ver cómo quedaría en este blog

Antes de tocar nada, aconsejo realizar una copia de seguridad de la plantilla por si borramos algo que no debemos (esto no se aplica sólo a este tutorial, las copias de seguridad aunque parezcan una tontería pueden salvar un blog de una catástrofe). Bueno, empezamos:

El primer paso es buscar el siguiente código.
<data:post.body/>
Y lo sustituimos por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:justify;' 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>
Buscamos </head> en el código HTML del blog pulsando CTRL+F y justo antes pegamos el script:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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;
}

//]]>
</script>
Acabamos de añadir el típico Leer Más en todas las entradas del blog, pero como queremos que este efecto no se aplique en la primera entrada, todavía tenemos que continuar. Volvemos a buscar en la plantilla, pero esta vez tenemos que buscar el código:
<b:include data='post' name='post'/>
Y lo sustituimos por:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<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='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Acabamos de añadir Leer más con miniatura que no se muestra en la primera entrada. Es posible que alguno de los códigos que había que buscar aparezca dos veces en la plantilla. Si esto ocurre debemos ir probando hasta que mediante Vista Previa observemos que se han efectuado los cambios.

El autor



Hache

17. Friki a tiempo completo. Descubrí Blogger hace unos cuatro años y desde entonces no he parado de cargarme plantillas por tocar donde no debía. Ahora resulta que las arreglo y todo. Puedes stalkearme por Twitter.   Blog




2 comentarios:

  1. HALA. ¡Muchas gracias, de verdad! Llevaba mucho tiempo querer centrar la cabecera sin tener que ampliarla >///< Me has servido mucho :)

    ¡Un beso!
    HTR.

    ResponderEliminar
  2. Gracias!!! acabo de usarlo en el blog y aunque me costo un poco hacerlo, cuando entendí que estaba haciendo mal despues fue super simple!!!

    ResponderEliminar

 

Facebook

Si tienes algún problema con tu plantilla, quieres recomendarnos algún tutorial o simplemente quieres estar al tanto de todas las novedades de HTML Para Torpes, puedes seguir nuestra página en Facebook.

Torpes

We use...

A veces el HTML y el CSS producen verdaderos dolores de cabeza. Aquí intentaremos solucionarlos de la forma más sencilla posible.

HTML para Torpes está formado por un grupo de blogueros interesados por el diseño web que colaboran de forma desinteresada, por lo que pedimos comprensión a la hora de evaluar el contenido y agradecemos cualquier sugerencia.

Siempre con la tecnología de: