12 marzo 2014

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Resumen Automático en las Entradas (Leer más) Paso a Paso

Me han preguntado muchas veces, cómo lograr que las entradas se vean como en mi blog en la página principal. Bueno, pues para crear el resumen de entrada ampliable uso un script que +Oloman Oloman nos regala en su blog, así que antes de empezar el tutorial, le doy el merecido crédito.

Además, para lograr esa apariencia, uso CSS y cierta técnica que hoy te voy a regalar, explicada paso a paso ;)

Cómo Funciona

A diferencia de los resúmenes después del salto que se crean usando la herramienta del editor de Blogger: "Inserta salto de linea", estos resúmenes son automáticos y se logran por medio del código JavaScript.

El texto de cada entrada resumida siempre tendrá la misma cantidad de caracteres, que es configurable, y que se crea a partir del primer párrafo de cada entrada respectivamente, eliminando cualquier etiqueta de HTML existente en la entrada, como la que crea texto resaltado en negritaitálica, etc., por eso el texto se ve plano en las entradas resumidas.

Además el tamaño de la imagen lucirá igual en todos las entradas resumidas, y no tendrás que preocuparte porque se vean distorsionadas ya que solo se muestra una parte de la imagen, misma que definimos.

Todo el código que facilito en los pasos incluyendo el script, ha sido comprimido de tal modo que sea más ligero para tu blog en términos de rendimiento.

Compatibilidad con Navegadores
Tanto el resumen automático, como la apariencia que tendrán las entradas resumidas funcionan en los principales navegadores, incluyendo también la vieja versión de Internet Explorer: Internet explorex 7, así que no tienes que preocuparte por cómo verán las entradas los usuarios que utilicen esa versión del navegador ;)


Sobre el Tutorial y el Resultado


Este tutorial, ha sido creado para ser implementado en la plantilla sencillo de Blogger, ya que debido a la sencillez de su diseño se adapta y armoniza muy bien, aunque, también puede ser implementado en otras plantillas del diseñador de plantillas, en ésto último me refiero a la facilidad con la que pueden seguirse los pasos.

La apariencia que tendrá cada entrada resumida en la página principal, las páginas de etiquetas y las de archivo, es la que puedes ver a continuación:

Entrada con resumen



Antes de empezar

Para poder seguir el tutorial, y obtener los resultados que se muestran en la Demostración es importantísimo que hagas lo siguiente:
  • Guarda una copia de seguridad de tu plantilla. Para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear/Restablecer copia de seguridad", luego descarga la plantilla completa y la guardas en una carpeta de tu computadora. De ese modo, podrás volver a instalarla, si es que algo te sale mal, al editar el código de la plantilla.
  • También restablece los valores predeterminados en el widget de las entradas, para ello, échale un vistazo a este video:
    Video donde se restablece los valores predeterminados en el widget de las entradas.

    Haciendo ésto, el tutorial será fácil de llevar a la práctica. Ten en cuenta que si has agregado algún elemento en la sección debajo de las entradas, va a desaparecer, así que analiza si te conviene o no hacerlo.

  • Configura la fecha de las entradas para que utilice el formato que puedes ver en la imagen anterior. Para ello échale un vistazo a esta entrada: Configurar el formato de la fecha en las entradas.

Hecho lo anterior, sigue estos pasos:

  1. Ve a Plantilla > Editar HTML, y haz click dentro del editor (donde esta el código), cuidando no mover nada.
  2. Pulsa las teclas Ctrl + F simultáneamente para que se active el buscador del editor (que usarás repetidamente) y que luce así:

    Buscador del editor de Blogger

  3. Ya que activaste el buscador, pon en el campo esto: </head> y pulsa "Enter" para que te envíe a esa parte, y pega justo antes el siguiente script:

    <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>
    //<![CDATA[
    function createSummaryAndThumb(n,t){var i=document.getElementById(n),f="",e=i.getElementsByTagName("img"),r=sumario_noimg,u;e.length>=1&&(f='<div class="contemin"><div class="minis" style="background-image:url('+e[0].src+')"></div></div>',r=sumario_img),u=removeHtmlTag(i.innerHTML,r,f,t),i.innerHTML=u}function removeHtmlTag(n,t,i){var o=n,f,u,e;if(n.indexOf("<")!=-1){for(f=n.split("<"),u=0;u<f.length;u++)f[u].indexOf(">")!=-1&&(f[u]=f[u].substring(f[u].indexOf(">")+1,f[u].length));n=f.join("")}if(n.length<=t)return o;for(t=t<n.length-1?t:n.length-2;n.charAt(t-1)!=" "&&n.indexOf(" ",t)!=-1;)t++;return n=n.substring(0,t-1),e=i+"<div>"+n+"... </div>"}sumario_noimg=280,sumario_img=328;
    //]]>
    </script>
    </b:if>


  4. De nuevo, con la ayuda del buscador del editor busca: </b:template-skin> y justo después pones esto:

    <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post{background:#FFF;border-bottom:1px solid #E2DED2;border-top:1px solid #DBD8CD;box-shadow:1px 0 1px #ddd;margin:10px 0;padding:7px 0 4px 8px}
    .date-header,.post-labels,.vcard{display:none}
    .contemin{position:relative;overflow:hidden;width:220px;height:150px;clear:both;float:left;margin:0 10px 5px 2px}
    .minis{width:220px;height:150px;background-size:cover;background-repeat:no-repeat;background-position: 0 50%;}
    .post-footer{height:38px;line-height:37px;position:relative;top:4px;left:-8px;background:#edf6ff;width:auto;margin:10px 0 0;padding:7px 0}
    .leermas{text-align:center;background:#5badff;color:#fff!important;position:absolute;top:-1px;right:-10px;white-space:nowrap;font-size:12px;width:135px;height:53px;line-height:53px;text-transform:uppercase;transition:all .2s;margin:1px 0 0;padding:0}
    .leermas:hover{color:#0ca3c9;background:#39f;text-decoration:none}
    .post-timestamp,.post-comment-link{float:left;margin-left:8px}.clear{clear:both}
    </style>
    </b:if>

    En el código anterior, estamos definiendo la apariencia que tendrán las entradas con CSS. Además, estamos usando código b:if de Blogger para lograr que el CSS se ejecute en todas las páginas excepto en las entradas del blog, y las páginas estáticas. He resaltado los colores coloreándolos de naranja, para que los puedas cambiar si quieres. Esta es la lista de colores de fondos que probablemente querrás personalizar y que enlisto según aparece de arriba a abajo:
    • Este color: #FFF, es el del fondo del post (blanco).
    • Este color: #edf6ff es el color de fondo de toda la sección donde está la fecha, y el numero de comentarios (azul más clarito).
    • Este color:#5badff es el color de fondo del enlace "Seguir leyendo".
    • Este otro color: #39f es el color que tendrá el fondo del enlace "Seguir leyendo" cuando se pone el puntero del ratón encima de éste.

  5. Después, dirígete de nuevo al buscador del editor (otra vez), y busca: <div class='post-body entry-content', para que el editor te envié a la siguiente parte del código y que reconocerás, porque arriba está el comentario que he coloreado de verde...

          <!-- Then use the post body as the schema.org description,
              for good G+/FB snippeting. -->

          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
            <data:post.body/>
            <div style='clear: both;'/>
          </div>
        <b:else/>
          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

        </b:if>

        <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
        </b:if>


  6. Luego, selecciona el código que he coloreado de azul, y sustitúyelo por este:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'><data:post.body/></div><div class='clear'/><b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
    <data:post.body/></div><div class='clear'/>
    <b:else/><div expr:id='&quot;summary-&quot; + data:post.id'><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'><data:post.body/></div></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script></b:if></b:if><div class='clear'/>


  7. También, elimina el código resaltado de rojo del paso 5, ya que éste genera el enlace que dice: "Más información" cuando usas el salto de linea del editor de entradas y no será necesario tener, ya que en las entradas siempre aparecerá el enlace a la entrada que dice: "Seguir leyendo".

  8. Luego, busca esta linea con el cuadro de búsqueda del editor (y que activaste en el paso 2): <div class='post-footer-line post-footer-line-2'> la segunda de arriba hacia abajo, y antes (arriba) pones ésto:

    <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'><a class='leermas' expr:href='data:post.url' expr:title='data:post.title'>Seguir leyendo </a> </b:if>


  9. Después, verifica en vista previa. Cada entrada debe verse más o menos así:

    entrada resumida que muestra etiqueta que precede a la fecha

    Nota: El fondo del blog de la demostración es gris, como se aprecia en la imagen.

  10. Ahora tenemos que hacer que el texto ''en" que precede a la fecha y que puedes ver en la imagen de arriba, se muestre solo al ingresar a las entradas ya que ahí, no es útil. Si quieres, puedes eliminar la etiqueta que hace que aparezca ese texto y que abajo en el código he coloreado de verde, aunque yo recomiendo dejarlo de tal modo que se muestre en el siguiente orden debajo de cada entrada, al ingresar a éstas y haya congruencia:

    Publicado por Karla Castañeda  en  03/11/2014 (la fecha es solo un ejemplo).

    Así que para ocultar el texto "en", busca esta linea de código: <data:top.timestampLabel/> (la segunda de arriba hacia abajo) usando el campo de búsqueda del editor, y cámbiala por todo esto:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:top.timestampLabel/></b:if>

  11. Luego, verifica en vista previa, y si todo luce bien, guarda los cambios.
  12. Paso extra opcional si utilizas los botones para compartir de Blogger. Lo que haremos ahora es agregar cierto código que hará que los botones se muestren solo en las entradas individuales. Para ello, busca esta linea: <div class='post-share-buttons goog-inline-block'>

    <!-- share buttons -->
    <div class='post-share-buttons goog-inline-block'>
     <b:if cond='data:post.sharePostUrl'>
      <b:include data='post' name='shareButtons'/>
     </b:if>
    </div>


    Y lo cambias por este:

    <b:if cond='data:blog.pageType == "item"'><div class='post-share-buttons goog-inline-block'><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div></b:if>
  13. Verifica en vista previa y si todo luce bien, guarda los cambios en Guardar plantilla.
¡listo!, ya habrás creado resumen automático para todas las entradas del blog.


Notas Finales Importantes
  • Si no te gusta la sombra en el contenedor de las entradas, la puedes quitar si eliminas esta linea de CSS, del paso 4, del tutorial: box-shadow:1px 0 1px #ddd;
  • No hay ningún ancho definido, por lo que puede usarse en cualquier ancho de la columna principal. 
  • Para lograr que la entrada coincida a la izquierda con el menú de páginas, usa este CSS:
    .columns-inner{margin-left:-12px} que pones desde el diseñador de plantillas, en la opción Añadir CSS (Plantilla > Personalizar > Avanzado > Añadir CSS).

Hay que tomar en cuenta, que no estamos mostrando los elementos: reacciones y el perfil del autor debajo de la entrada. Si es así, habrá que usar cierto código para que solo se muestren entrar a los post, pero eso ya lo veremos en otro post ;)

Última Revisión y/o Actualización: 04/12/2015. He simplificado el uso de código condicional de Blogger, ya que ahora es posible hacerlo gracias a una actualización de Blogger.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.