Opción "Leer más..." en la página de inicio del blog

Desde los inicios del blog tomé la decisión de presentar tan sólo un post en mi página de inicio. Eso era así con el fin de dar mayor importancia a dicho post sobre los anteriores. De esa manera esperaba que las visitas se centrarán más en él.

Pues mi opinión al respecto ha cambiado. Al escribir sobre temas muy dispares he pensado que sería mejor mantener en la página inicial los últimos post y que seais vosotros quienes decidís si el post es de vuestro interés o no.

Pero como me gusta escribir, a menudo, post bastante largos, eso me impedía dar una visión general de varios artículos (el primero seguía acaparando toda la atención). Por eso he decidido mostrar una introducción de cada artículo acompañada del botón "Leer más...", el cual se encarga de enlazar a la página individual del post. Además, otra de las ventajas que proporciona el forzar a los lectores a pasar por la página individual del post es que les "acerca" a los comentarios, pudiendo conseguir así, más fácilmente, opiniones que me ayuden a mejorar.

En fin, vayamos al grano. Veamos como conseguir que en la página de inicio se muestre tan solo un breve resumen y una imagen en miniatura para los últimos artículos:

1. Lo primero que haremos será ir a Personalizar, y a Diseño-->Edición HTML y marcamos la casilla de Expandir plantillas de artilugios.
2. Una vez hecho, en el código buscamos la siguiente etiqueta:

   <data:post.body/>

3. La etiqueta anterior la borramos y en su lugar ponemos el siguiente código:

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div expr:id='"blportadarsmn" + data:post.id'>
         <data:post.body/>
      </div>
      <script type='text/javascript'>
         blentradaresmn("blportadarsmn");
      </script>
      <span class='blenlaceleerms' style='float:right'>
         <a expr:href='data:post.url'> Leer más...</a>
      </span>
   </b:if>
   <b:if cond='data:blog.pageType == "item"'>
      <data:post.body/>
   </b:if>

4. Ahora, buscamos la siguiente etiqueta:

   </head>

   Y justo antes añadimos el siguiente código:

   <script type='text/javascript'>
      blresumenno = 420;      /* número máximo de caracteres a mostrar */
      blresumensi = 340;      /* número mínimo de caracteres a mostrar*/ 
      blalturaimg = 100;      /* Altura en píxeles de la imagen a mostrar */ 
      img_thumb_width = 120;  /* Ancho en pixeles de la imagen a mostrar */
   </script>
   <script type='text/javascript'>
      //<![CDATA[
      function bltred(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 blentradaresmn(pID)
      {
         var div = document.getElementById(pID);
         var blimgn1 = "";
         var img = div.getElementsByTagName("img");
         var blpost = blresumenno;
         if(img.length>=1)
         {
            blimgn1 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+blalturaimg+'px"/></span>';
            blpost = blresumensi;
         }
         var blportadarsmn = blimgn1 + '<div>' + bltred(div.innerHTML,blpost) + '</div>';
         div.innerHTML = blportadarsmn;
      }
      //]]>
   </script>

5. Con eso basta para que todo funcione, pero vamos a personalizar un poco el enlace "Leer más", enmarcándolo y añadiéndole un color de fondo. Para ello buscamos la siguiente etiqueta:

   ]]></b:skin>

   Y justo antes añadimos el siguiente código:

   .blenlaceleerms
   {
      border: 1px solid #FFCC33;   /* Bordes del enlace */
      padding: 4px;                /* Distancia hasta el borde */
      background: #A7A42F;         /* Color de fondo */
   }

6. Salimos guardando los cambios y ya podemos comprobar el efecto en el blog. Recuerda que para configurar el número de post de la página de inicio puedes hacerloen el apartado Configuración.

Y eso es todo. Es bastante fácil, espero que os sea práctico como me fue a mi.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS