Cómo poner el número de comentarios debajo del título del post

Normalmente los inicios de un blog suelen ser complicados porque, entre otras dificultades, recibe muy pocas visitas.

Es complejo hacerse un hueco y captar tráfico. El esfuerzo es enorme y los resultados son escasos lo que ocasiona que muchos bloggers abandonen el proyecto antes de un año.

Si no es tu caso y tu blog va ganando popularidad y visitas es muy probable que los lectores participen e interactúen dejando algún comentario o realizando alguna consulta.

Para las publicaciones que no tienen comentarios realmente no favorece destacar esta información pero para las entradas que están siendo muy comentadas puede resultar interesante.

El inconveniente de Blogger es que los comentarios, por defecto, se muestran en la parte inferior de la entrada, pasando este dato desapercibido para la gran mayoría de los visitantes del blog.


Contenido

¿Cómo podemos mostrar los comentarios en la parte superior del blog?

     .Personalizar el valor a mostrar para las entradas sin comentarios

     .Incluir una imagen de fondo para los comentarios

     .No mostrar la línea de comentarios para valores 0

¿Cómo podemos mostrar los comentarios en la parte superior del post?

Dentró del menú de Blogger accedemos a Tema → Editar HTML después de realizar una copia de seguridad.

Una vez estamos en la ventana de edición, activamos el buscador con CTRL + F y buscamos
<b:includable id='post' var='post'>  ...  </b:incudable>

Dentro de esta etiqueta añadimos justo encima de <div class='post-header'> las siguientes líneas en color azul,

 <!---COMENTARIOS BAJO EL TÍTULO DEL POST-->
<b:if cond='data:post.allowComments'>
<span style='color: black; font-size: 15px; background: none;'>Comentarios</span>
<span style='font-size:18px; background: orange; width:30px; height:30px; text-align:center; float:none; margin:2px; padding:2px;'>
     <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <b:if cond='data:post.numComments == 0'>0
          <b:else/>
          <data:post.numComments/>
        </b:if>
     </a>
</span>
</b:if>
 <div class='post-header'>

Tras este cambio, si se accede a la página de Inicio del blog o a un artículo determinado, el número de comentarios se mostrará bajo el título del post.

Imagen 1

La etiqueta condicional afectará a las entradas del blog si los comentarios están habilitados.

<b:if cond='data:post.allowComments'>

Se ha incluido dentro del condicional el texto "Comentarios" al que aplicamos estilo mediante la etiqueta <span style>.
El texto se mostrará en color negro [color: black], con un tamaño de fuente de 15px y sin fondo [background: none].

A continuación añadimos otra etiqueta <span style> para configurar el enlace de acceso a los comentarios de la entrada.

<a class='comment-link'..> </a>

El número de comentarios se mostrará con alineación al centro [text-align: center], tamaño de fuente de 18px, fondo en color orange, alto y ancho de 30px de la caja no flotante [float: none], margen de 2px y relleno de 2px.

Dentro de este enlace incluimos otro condicional,

<b:if cond='data:post.numComments == 0'>0

para que las entradas cuyo número de comentarios sea igual a 0 muestre el valor 0 (como se puede comprobar en la Imagen 1).

Si no se cumple esta condición <b:else/>, es decir, la entrada tiene comentarios, en lugar de 0 se mostrará su número.

<data:post.numComments/>

Personalizar el valor a mostrar para las entradas sin comentarios

Para las entradas que no tienen comentarios puede ser interesante personalizar el dato a mostrar.

Por ejemplo, podemos animar al lector a dejar un comentario.

Para ello sustituimos 0 por el texto "Sé el primero en comentar",
<b:if cond='data:post.numComments == 0'>Sé el primero en comentar

modificando al mismo tiempo su formato respecto al ejemplo anterior [Imagen 1].

 <!---COMENTARIOS BAJO EL TÍTULO DEL POST-->
<b:if cond='data:post.allowComments'>
<span style='color: black; font-size: 15px; background: none;  margin: 15px;'>Comentarios</span>
<span style='font-size: 12px; background: ivory; border-radius: 5px; border: 2px ridge dimgrey; text-align: center; float: none; padding: 3px;'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <b:if cond='data:post.numComments == 0'>Sé el primero en comentar
        <b:else/>
         <data:post.numComments/>
      </b:if>
   </a>
</span>
</b:if>
<div class='post-header'>

Imagen 2

Vemos en la Imagen 2 los cambios que se han producido en la información que corresponde a los comentarios.
(Líneas en azul resaltadas en negrilla del código HTML incluido en el cuadro anterior).

Se ha aplicado un margen [margin: 15px] para desplazar hacia la derecha la línea de comentarios.

Tras estas modificaciones, en las entradas con comentarios igual a cero se mostrará el texto "Sé el primero en comentar", con un tamaño de fuente de 12 px [font-size: 12px], fondo en color ivory [background: ivory], que estará rodeado de una caja con radio de 5px para las esquinas [border-radius: 5px] y línea de borde con estilo ridge, en color dimgrey y grosor de 2px [border: 2px ridge dimgrey]. El relleno se modifica a 3px [padding: 3px].

Incluir una imagen de fondo para los comentarios

Tenemos la posibilidad de añadir una imagen como fondo para mostrar de una forma más original y creativa el número de comentarios que los usuarios han dejado en las publicaciones.

Es muy sencillo.

Una vez tenemos la dirección URL de la imagen, la añadimos al código HTML dentro de la propiedad background.

En lugar de un fondo en color orange como en la Imagen 1 se mostrará la imagen seleccionada.

 <!---COMENTARIOS BAJO EL TÍTULO DEL POST CON IMAGEN COMO FONDO-->
<b:if cond='data:post.allowComments'>
<span style='color: black; font-size: 15px; background: none;  margin: 15px;'>Comentarios</span>
<span style='color: black; font-size: 15px; background:url(URL DE LA IMAGEN) no-repeat; width:31px; height:30px; text-align:center; float:left;'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <b:if cond='data:post.numComments == 0'>0
        <b:else/>
         <data:post.numComments/>
      </b:if>
   </a>
</span>
</b:if>
<div class='post-header'>

Imagen 3

En este ejemplo, además de añadir una imagen como fondo, he modificado de nuevo su aspecto.
En esta ocasión el contador se posiciona a la izquierda del texto "Comentarios".

No mostrar la línea de comentarios para valores 0

Por último, vamos a ver cómo mostrar la información relativa a los comentarios únicamente en las entradas que cuenten con al menos uno. Las publicaciones que no tengan comentarios no mostrarán esta línea.

Mantengo la misma configuración de la Imagen 3 pero tenemos que hacer unas modificaciones en el código HTML, que pasa ser el siguiente.

 <!---COMENTARIOS BAJO EL TÍTULO DEL POST CON IMAGEN COMO FONDO, SI HAY-->
<b:if cond='data:post.allowComments'>
      <b:if cond='data:post.numComments == 0'>
           <span style='display: none;'><data:post.Comments/></span>
      <b:else/>
<span style='color: black; font-size: 15px; background: none;  margin: 15px;'>Comentarios</span>
<span style='color: black; font-size: 15px; background:url(URL DE LA IMAGEN) no-repeat; width:31px; height:30px; text-align:center; float:left;'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>   
            <data:post.numComments/>
</a>
</span>
     </b:if>
</b:if>
<div class='post-header'>

Se mantiene el primer condicional de los ejemplos anteriores (entradas donde están permitidos los comentarios).

<b:if cond='data:post.allowComments'>

pero movemos el condicional que afecta a las entradas que no tienen comentarios y lo añadimos a continuación del anterior.

<b:if cond='data:post.numComments == 0'>

¿Con qué finalidad?

Porque necesitamos que no se muestre el número de comentarios cuando su valor es igual a 0 [= = 0] y lo hacemos incluyendo dentro de esta etiqueta <b:if> una etiqueta <span> gracias a la cual ordenamos que no se muestren [display:none] los comentarios [<data:post.Comments/>]

<span style='display: none;'><data:post.Comments/></span>

Si no se cumple esta condición [<b:/else>], es decir, la entrada tiene 1 o más comentarios, se mostrará la línea de comentarios (ver Imagen 3).
 

<data:post.numComments/> Comentarios

Hemos visto la utilidad de mostrar en un lugar preferente el número de comentarios de los artículos o publicaciones cuando el blog empieza a ser popular y los visitantes dejan sus opiniones. 

En ocasiones los lectores también plantean dudas que pueden quedar resueltas en ellos, por lo que es importante hacer accesibe y fácil de localizar esta información que puede resultar de interés para otros usuarios.

Tenemos múltiples formas de personalizar la línea de comentarios en el blog. 
En este artículo he probado dos estilos que espero sirvan de ayuda para la creación y personalización de los vuestros.

TEMAS RELACIONADOS

⟾ Personalizar los comentarios del post-footer
⟾ Mover los elementos del post-footer a otra sección del blog

Resumen de entradas en la portada del blog [Blogger]

Si sueles visitar blogs y consumir contenido publicado en ellos, te habrás dado cuenta de que en la mayoría de los casos su página de Inicio o Home (la vista inicial al acceder por la URL del blog) muestra un fragmento de texto con una imagen (thumbnail o miniatura) de las entradas publicadas.

La mayoría de los bloggers intentan que sus visitantes no solo lean su publicación más reciente sino también que accedan a otros artículos que puedan ser igualmente de interés.

Si la página principal del blog muestra integramente cada uno de los artículos y estos son extensos, es muy probable que la permanencia del visitante sea breve porque solo podrá ver una publicación. Si esta no es de su interés abandorá la página perdiendo la oportunidad de que compruebe la existencia de otros artículos que sí podrían ser de utilidad.

¿Cómo se puede disminuir la tasa de rebote?

Creando un resumen de entradas.

En la entrada "Resumen de entradas en Blogger: Dar estilo al enlace de salto de línea" se explica cómo mostrar un resumen de los artículos en la página principal del blog de forma manual, siendo necesario incluir en cada entrada un salto de línea.

En esta ocasión vamos a crear un resumen de entradas automático para la página Inicio del blog y ver cómo pueden configurarse sus distintos elementos.


Contenido

1. Crear un Resumen de Entradas en la Página Inicio del blog de forma automática

    1.1. Añadir un script a la plantilla

    1.2. Añadir los condicionales

2. Cómo se puede modificar el tamaño de las miniaturas o Thumbnails

3. Cómo se puede mostrar una imagen predeterminada para las entradas sin Thumbnails

4. Cómo se puede modificar la longitud del fragmento de texto

5. Cómo modificar el tipo de letra del fragmento de texto

6. Cómo posicionar el texto bajo la imagen o Thumbnail

7. Cómo eliminar el fragmento de texto

8. Cómo eliminar la miniatura o Thumbnail

9. Cómo eliminar el pie de página de cada publicación

10. Cómo eliminar la fecha de publicación de cada entrada

11. Cómo eliminar el título de cada entrada

12. Cómo aplicar formato al salto de línea "Leer más"

Ejemplo de Resumen de Entradas [Fecha + Título + Fragmento Texto + Salto de Página]"

1. Crear un Resumen de Entradas en la página inicio del blog de forma automática

1.1. Añadir un script a la plantilla.

Como vamos a modificar el tema del blog hacemos antes una copia de seguridad.

Vamos a Tema → Editar HTML

Una vez dentro de la ventana de edición, activamos el buscador con CTRL + F y escribimos </head>.
 
A continuación de esta etiqueta </head> añadimos el siguiente script,

 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</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="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

1.2. Añadir los condicionales.

Los condicionales los añadimos para que se ejecute el script con el resumen de entradas solo en la página principal del blog.

Localizamos en la plantilla la etiqueta  <data:post.body/> (normalmente suele haber dos o tres).

Eliminamos la última etiqueta <data:post.body/> y en su lugar añadimos el siguiente código HTML,

<!-- si es una página estática se muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>  <!-- si la condición no se cumple entonces se ejecutan las siguientes órdenes -->
<!-- si NO es una entrada individual "item" se ejecuta el script -->
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> 
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if>
 <!-- si es una entrada individual "item" muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Guardamos los cambios y visualizamos el blog.

El Resumen de Entradas incluye en primer lugar la fecha de publicación del blog y bajo ella, el título del post.

Si el artículo tiene una imagen destacada o Thumbnail, se mostrará a continuación del título y se situará a la izquierda del texto [float:left].

Muestra también el salto de línea "Leer más" que llevará al lector a la página correspondiente a esa entrada  y por último se mostrará el pie de entrada o post-footer.

IMAGEN 1 - Resumen de Entradas Blogger

La primera entrada no tiene ninguna imagen por lo tanto el resumen de entradas solo muestra su fecha, título, fragmento resumido, "leer más" y post-footer.

La segunda entrada se muestra con una imagen destacada o Thumbnail. Si no la tiene, Blogger por defecto cogerá la primera de la publicacion.

Si el espacio ocupado por la imagen es inferior al espacio que ocupa el texto, el resultado sería el siguiente,

IMAGEN 2 - Resumen de Entradas Blogger

Ya hemos incluido un Resumen de Entradas pero es muy posible que necesitemos personalizarlo para adecuarlo a nuestras necesidades.

Vamos a ver diferentes supuestos.

2. Cómo se puede modificar el tamaño de las miniaturas o Thumbnails

Dentro del script, buscamos las siguientes líneas.

img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/

y modificamos los valores asignados para el ancho y alto.

En este caso he modificado ambos valores a 350.

IMAGEN 3 - Resumen de Entradas Blogger [Thumbnail configuración tamaño]

Si queremos que las imágenes ocupen el ancho total de la caja contenedora debemos modificar los valores a 100%. Si la imagen tuviera un ancho inferior al espacio de la caja contenedora se mostraría con sus dimensiones originales.

img_thumb_width = "100%"; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = "100%"; /*Alto imagen miniatura Thumbnail*/

3. Cómo se puede mostrar una imagen predeterminada para las entradas sin Thumbnails

Si queremos que las publicaciones que no tienen ninguna imagen o miniatura muestren una imagen predeterminada (será la misma para todas las entradas que cumplan esta condición) tenemos que añadir estas líneas al script.

Las pegaremos después de var summ = summary_noimg; y antes de if(img.length>=1) {

.....
var summ = summary_noimg; 
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 15px 10px 0px;"><img src="URL de la imagen" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_noimg;
}
 if(img.length>=1) {
...

4. Cómo se puede modificar la longitud del fragmento de texto

Dentro del script, buscamos las siguientes líneas.

summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/

Voy a modificar ambos valores.

Para las entradas que no tengan una miniatura o una imagen modifico el valor a 500.
[summary_noimg = 500]

Para las entradas que cuenten con Thumbnail o alguna imagen, el valor será de 5.
[summary_img = 5]

IMAGEN 4 - Resumen de Entradas Blogger [Texto configuración longitud]

En la primera entrada que tiene imagen se muestra la palabra "Internet" que tiene 8 caracteres. Aunque he establecido un valor de 5 se muestra una longitud superior porque no corta las palabras (tiene en cuenta los espacios).

Si pusiera un valor igual a 0 seguirá mostrando la palabra "Internet".

5. Cómo modificar el tipo de letra del fragmento de texto

Dentro del script busco la etiqueta <div>.

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

Y la sustituyo por una etiqueta  <div style>.

var summary = imgtag + '<div style = "font-family:tahoma; font-size:18px; font-weight:600">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

El texto se mostrará en fuente Tahoma, con tamaño de 18px y en negrilla.

IMAGEN 5 - Resumen de Entradas Blogger [Texto configuración formato Fuente]

6. Cómo posicionar el texto bajo la imagen o Thumbnail

Seguimos en el script y localizamos esta línea.

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

Igual que en el caso anterior modifico la etiqueta <div> por la marcada en negrilla.

var summary = imgtag + '<div class="summary" style="clear:both">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

Ahora el fragmento de texto se muestra bajo la imagen.

IMAGEN 6 - Resumen de Entradas Blogger [Texto bajo la imagen o Thumbnail]

7. Cómo eliminar el fragmento de texto

Buscamos en el script la misma línea que en el apartado anterior.

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

En esta ocasión la reemplazo por una etiqueta <div style>

var summary = imgtag + '<div style = "display: none">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

Ahora el resumen de entradas no muestra el texto.

IMAGEN 7 - Resumen de Entradas Blogger [Texto eliminado]

8. Cómo eliminar la miniatura o Thumbnail

Dentro del script, buscamos las líneas relativas a la imagen.

imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';

Modifico la etiqueta <span style> eliminando las propiedades marcadas en negrilla del cuadro superior y en su lugar incluyo [display:none].

imgtag = '<span style="display: none;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';

Ahora el resumen de entradas ya no muestra las imágenes.

IMAGEN 8 - Resumen de Entradas Blogger [Sin imágenes o Thumbnails]

9. Cómo eliminar el pie de página de cada publicación

Si queremos eliminar el post-footer o pie de página que muestra el autor de la publicación, los comentarios de los usuarios, los botones de redes sociales para compartir y las etiquetas, tenemos que localizar los condicionales que hemos añadido en el punto 2 e incluir las líneas en rojo.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> 
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
 <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Como se puede ver en la siguiente imagen ya no es visible el pie de página.

IMAGEN 9 - Resumen de Entradas Blogger [Sin post-footer o pie de entrada]

10. Cómo eliminar la fecha de publicación de cada entrada

Si no queremos que en el resumen se muestre la fecha de publicación de las entradas tenemos que seguir trabajando con los condicionales del punto 2. Para este supuesto necesitamos incluir las líneas marcadas en rojo.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> 
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.date-header { display: none;}
</style>
</b:if>
 <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

La página principal del blog se verá así,

IMAGEN 10 - Resumen de Entradas Blogger [Sin fecha de publicación]

11. Cómo eliminar el título de cada entrada

Normalmente es necesario y útil mostrar el título de las publicaciones pero si decidimos eliminarlo haremos igual que en el punto anterior (eliminación de la fecha) añadiendo,

<style type='text/css'>
.post-title { display: none;}
</style>

12. Cómo aplicar formato al salto de línea "Leer más"

Continuando con las líneas correspondientes a los condicionales del punto 2, buscamos la etiqueta span del salto de línea.
<span class='jump-link'>.

<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>

La propiedad float nos permite ajustar el texto "Leer más". Por el momento se posiciona a la derecha, con un padding superior de 10px y un padding derecho de 50px.

float:right (a la derecha)
padding-top:10px (relleno superior de 10px)
padding-right:50px (relleno derecho de 50px)

Podemos modificar su configuración y estilo añadiendo las propiedades que necesitemos para ajustar su formato al deseado.

Por ejemplo, vamos a posicionarlo a la izquierda, con un margen superior de 10px para separarlo del fragmento de texto, se aplica un padding de 5px para que el texto "Leer más" quede centrado, el fondo es amarillo con borde negro, la fuente del texto en verdana tamaño 15px y negrilla.

Eliminamos el texto en malva y lo sustituimos por el marcado en rojo.

<span class='jump-link' style='float:left;margin-top:10px;padding:5px;background:yellow;border:solid black;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span>

Ahora vemos que ha cambiado el salto de página.

IMAGEN 11 - Resumen de Entradas Blogger [Formato salto de página]

Una vez comprobado cómo puede añadirse un resumen de entradas en la portada del blog y cómo pueden configurarse sus distintos elementos, vamos a ver un ejemplo.

Ejemplo de Resumen de Entradas [Fecha + Título + Fragmento Texto + Salto de Página]

En un gran número de blogs es frecuente encontrar en su portada un resumen de entradas que muestra la fecha de publicación, el título de la entrada, el fragmento de texto con un borde y el enlace para ver el contenido de la entrada.

IMAGEN 12 - Resumen de Entradas Blogger [Ejemplo]

Código del script

 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 510; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</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="overflow:hidden; border: none; margin-bottom:25px; margin-top: -20px; float:left; max-height:'+img_thumb_height+'px;width:auto"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
var summ = summary_img;
}
  var summary = imgtag + '<div class="summary" style="clear:both">' + '<div style = "font-family:arial; font-size:16px; font-weight:600; border: double lightgray; padding: 8px; margin-left:5px; margin-right:5px">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

HTML con los condicionales

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
 <span class='jump-link' style='float:left;margin-top:10px;margin-bottom:25px; padding:5px;background:linear-gradient(rgba(242,225,206, 0.5) 45%, dimgrey 95%, beige);border-radius:15px;
  border:4px ridge maroon;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
 <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Como hemos podido comprobar, mostrar en la página principal del blog un resumen de las entradas en lugar de la publicación completa puede resultar muy interesante.

Es posible que no se ejecute correctamente el script, en este caso eliminamos la etiqueta <data:post.body/> anterior a la última y añadimos el código HTML del punto 2.

Herramientas de corrección en Photoshop [Pinceles y Parche]

A la edad de nueve años recibí como regalo una cámara de fotos bastante simple y muy básica y con ella empecé a entusiasmarme por la fotografía, afición que ha ido creciendo a lo largo de los años. Por esta razón tengo un número elevado de fotos que estoy utilizando ahora para las redes sociales o el blog.

Pero me he encontrado con algunos problemas.

Varias fotografías tienen la marca de la hora y fecha en la que fueron tomadas. Este registro me permitía saber de forma fácil y rápida la fecha de la captura.

Ahora necesito hacer uso de estas fotografías pero no son adecuadas por incluir texto.

Podría recortar la foto pero en la mayoría de las ocasiones se perderían partes imprescindibles de la imagen y con el resultado de una pérdida de calidad. La acción de recortar y guardar un archivo JPEG ocasiona una pérdida de calidad al comprimirse de nuevo la imagen.

Hay diversos programas para comprimir fotos y recortar imágenes sin ocasionar una pérdida en su calidad pero después de varias pruebas voy a optar por hacer uso de las Herramientas de Corrección (método abreviado de teclado letra J) que proporciona Adobe Photoshop.

Para este caso en concreto de eliminación de texto voy a utilizar tres herramientas.

￭ Herramienta Pincel Corrector Puntual.
￭ Herramienta Pincel Corrector.
￭ Herramienta Parche.

Si este grupo de herramientas no está visible en la Barra de Herramientas ver "Cómo activar herramientas en Photoshop".

Abrir una fotografía en Photoshop

Entro en Photoshop y abro la fotografía que quiero retocar.

Para eso voy al Menú de Comandos → Archivo → Abrir

Selecciono la foto y hago clic en Abrir.

Como se puede ver en la imagen superior, en la esquina inferior derecha se muestra la fecha y la hora, elementos que quiero eliminar.

Amplío la fotografía para trabajar mejor el área de la imagen a retocar.

Accedo a la Barra de Herramientas (panel alargado situado en el lateral izquierdo del espacio de trabajo) y selecciono la Herramienta Zoom.

 

El cursor se transforma en una lupa que voy a situar sobre el texto que voy a eliminar. Hago clic sobre esta área y la amplío hasta un nivel que me permita trabajar con mayor precisión.

Podemos centrar o mover la zona, bien con el uso de las barras de desplazamiento de la ventana de imagen o haciendo clic sobre la barra espaciadora. En este último caso se activará la Herramienta Mano que nos permitirá desplazar la imagen según nuestras necesidades.

Como el texto con la fecha y hora tiene un fondo homogéneo, la herramienta correctora más apropiada es la Herramienta Pincel Corrector.

Herramienta Pincel Corrector (J)

En la Barra de Herramientas selecciono la Herramienta Pincel Corrector (letra J). Si tenemos varias herramientas de este grupo podemos alternarlas presionando la tecla Mayus y J.

Una vez está activada esta herramienta, el cursor se transforma en un círculo cuyas propiedades podemos modificar en la Barra de Opciones.

Selecciono un pincel de tamaño 19px de diámetro, con dureza 100% (definición del borde máxima). El espaciado controla la distancia entre las marcas de pincel de un trazo. Dejo el valor 25% que viene establecido por defecto.

A continuación debo definir un punto de origen que sirva para reparar la imagen. Es decir, tengo que buscar un punto de la imagen que pueda reemplazar al área que quiero reparar, en este caso eliminar.

En la fotografía del ejemplo es fácil localizar un punto de origen porque el fondo de arena es similar en toda la zona ampliada de la imagen.

Por lo tanto presiono ALT (el cursor se transforma en un círculo con una cruz interior) y hago clic sobre un punto de la imagen donde no haya ninguna marca.

Ya he definido la muestra, ahora solo me resta reparar la zona de la imagen que quiero eliminar.

Voy a empezar por el extremo izquierdo posicionando el ratón sobre el primer número 2. El cursor ya ha retomado el aspecto correspondiente a la Herramienta Pincel Corrector.

El área donde está el número 2 está siendo reemplazada por los píxeles de la muestra que he seleccionado previamente. Si muevo el ratón sobre el resto del texto el efecto es el mismo, los distintos elementos se verán reemplazados por la muestra a medida que el cursor se posiciona sobre ellos.

El reemplazo de la imagen de muestra se hará efectivo haciendo clic con el botón izquierdo del ratón.

Muevo el cursor con el botón izquierdo del ratón a lo largo de todo el texto que deseo eliminar.

En ocasiones la corrección no es perfecta al desplazar el cursor fuera del área a corregir.

Es lo que me ha sucedido en la fotografía del ejemplo, así que vuelvo a pasar de nuevo el cursor hasta eliminar todo el texto y que el fondo sea el correcto, sin manchas, imperfecciones o distintas tonalidades.

Activo de nuevo la Herramienta Zoom (Z) y en la Barra de Opciones selecciono Ajustar Pant. para ver la imagen al completo.

El texto ha desaparecido y la imagen está perfecta para otros usos.

Herramienta Pincel Corrector Puntual (J)

La herramienta Pincel Corrector Puntual es una variante del Pincel Corrector pero se diferencia de este último al no tomar una muestra previa (no es necesario definir un punto de origen).

El Pincel Corrector Puntual toma como referencia los píxeles que se encuentran en la zona próxima sobre la que estamos posicionando el cursor con el ratón. Por esta razón esta herramienta es más apropiada para trabajar áreas de imagen que no tienen un fondo más o menos similar u homogéneo.

Voy a tratar de eliminar la fecha y hora que se muestra en la siguiente fotografía.

Ampliando la imagen vemos que el fondo no es uniforme.

Sería muy laborioso eliminarlo con el Pincel Corrector ya que me obligaría a definir varios puntos de muestra.

Para este tipo de situaciones es más rápido y sencillo usar el Pincel Corrector Puntual.

Inicio el proceso de retoque siguiendo los pasos del apartado anterior.
Abro la imagen en Photoshop y amplío el área que quiero retocar con la Herramienta Zoom (Z).

Ya tengo la imagen preparada para el retoque.

Selecciono la Herramienta Pincel Corrector Puntual que se encuentra en la Barra de Herramientas. También se puede activar con el teclado (letra J).

Igual que en la herramienta Pincel Corrector, el cursor se convierte en un círculo.

En la Barra de Opciones establezco un diámetro de 17px porque es el grosor de pincel más adecuado al tamaño del texto que quiero eliminar.

Con este pincel no hay que definir un punto de origen, por lo tanto dirijo el ratón hacia el extremo izquierdo del texto, lo posiciono sobre el primer número 2 y con el botón izquierdo presionado voy moviendo el puntero a lo largo de este número.

Es importante no desviarse demasiado del elemento a eliminar porque se va a sustituir el contenido del área de la imagen sobre la que se aplica el pincel por el contenido de una zona próxima.

Si el resultado del retoque no es el correcto se aplica de nuevo el pincel hasta conseguir el resultado deseado.

Es lo que me ha sucedido tras el intento de eliminación del primer número 2.

Como puede comprobarse en la imagen superior, la eliminación del número 2 no ha sido correcta porque se ha sustituido por un elemento próximo ( / ).

Lo soluciono pasando de nuevo el pincel corrector sobre la barra inclinada.

Continúo aplicando el pincel por el resto del texto que quiero eliminar.

El resultado es el siguiente.

El texto se ha eliminado de la foto y aparentemente el resultado es perfecto.

Pero al ampliar con la Herramienta Zoom la zona retocada, compruebo que los resultados no son buenos.

En el recuadro de la izquierda se ve un salto en la manguera. En el recuadro derecho el retoque aplicado deja ver las sombras de los números eliminados.

Es decir, el retoque no soporta una ampliación de la imagen porque se verían estos fallos.

Si quiero lograr un resultado algo más profesional tengo que hacer uso de una nueva herramienta de corrección, la Herramienta Parche.

Herramienta Parche (J)

La herramienta Parche se utiliza para reparar imperfecciones o eliminar elementos en un área determinada de la imagen.

Esta área a retocar será reemplazada por los píxeles de otra área o motivo que se tomará como muestra, haciendo coincidir su sombreado, textura e iluminación.

Para un mejor resultado es preferible trabajar con áreas pequeñas.

Continuando con la imagen anterior, amplío la zona a retocar con la Herramienta Zoom para tratar de reparar el corte en la manguera (recuadro amarillo izquierdo) que se ha producido tras el uso del Pincel Corrector Puntual.

Voy a la Barra de Herramientas y selecciono la Herramienta Parche (letra J). Si usamos el teclado en lugar del ratón, alternamos las herramientas de este grupo presionando la tecla Mayus y J.

La Herramienta Parche se puede utilizar de dos formas:

▸Seleccionando el área a muestrear (que vamos a tomar de muestra).
▸Seleccionando el área a reparar.


Voy a empezar el retoque de la fotografía seleccionando el área a muestrear.

En la Barra de Opciones hago clic sobre Destino.

Ahora selecciono el área de la imagen que voy a tomar como muestra. Como pretendo rellenar el área de la imagen en la que falta la continuidad de la manguera, tengo que tomar como muestra un área similar al área a reparar, es decir, en donde aparezca la manguera sobre una zona de hierba. No sería válida una muestra de la manguera sobre tierra porque en la zona a reparar es visible vegetación.

Con el botón izquierdo del ratón selecciono el área a muestrear (arrastro el puntero y rodeo la zona que voy a tomar de muestra).

A continuación, y situando el puntero en el interior del área seleccionada, arrastro el ratón con el botón izquierdo presionado y muevo la selección al área que quiero reemplazar, es decir, al área donde se produce el salto.

El resultado es el siguiente,

No he logrado reparar el elemento que quería corregir porque he trabajado con una selección algo grande.

Deshago las acciones que he realizado para volver al estado inicial.
Voy al Menú de Comandos → Edición → Paso atrás.

La imagen ahora está en el estado previo al uso de la Herramienta Parche.

De nuevo selecciono esta herramienta y ahora tomo como muestra un área más pequeña.

Arrastro la selección y la sitúo a continuación de la zona marcada entre los puntos.

El resultado es el siguiente,

El espacio del salto es ahora menor porque se ha reemplazado parte de esta área con la muestra seleccionada previamente.

Repito los pasos hasta reemplazar por completo el corte en la manguera.

Para que el resultado sea óptimo debemos intentar que las líneas o elementos seleccionados en el área que se ha tomado como muestra tengan continuidad en el área de destino, como si estuviéramos construyendo un puzle donde todas las piezas deben encajar.

En este ejemplo tengo que lograr que coincidan de la forma más precisa posible las pequeñas áreas que voy muestreando de la manguera, de tal forma que el resultado sea natural y no se vean saltos en la imagen.



Si decido retocar la imagen seleccionando el área a reparar el procedimiento es muy similar pero al revés.

Se selecciona la Herramienta Parche y en la Barra de Opciones hago clic en Origen.

En este caso tengo que seleccionar el área de la imagen que voy a reemplazar (donde falta el tramo de manguera).

Arrastro con el ratón esta área seleccionada hacia un área de la imagen que contenga los píxeles que quiero tomar como muestra.

El área seleccionada (origen) ha sido reemplazada por los píxeles de la zona de destino.

La selección en Origen o Destino dependerá de la situación y condición de los elementos a sustituir o corregir. 
Podemos trabajar de forma individual o combinada con el fin de obtener el mejor resultado.

El resultado final del área retocada con la Herramienta Parche es el siguiente,

Para ver la imagen al completo selecciono en la Barra de Opciones Ajust Pant.

La fotografía ya no muestra el texto con la fecha y hora. ¡Ese era el objetivo!


Las Herramientas de Corrección en Photoshop, junto con las Herramientas de Visualización, son esenciales para cualquier trabajo de edición gráfica y retoque fotográfico por lo que es importante familiarizarnos con ellas y comprender bien su funcionamiento.