Mostrar el numero de entradas y comentarios totales

La forma más fácil de poner un apartado en el que se vea el total de las entradas que llevais publicadas, así como el número de comentarios que hay en vuestro blog, es usando los scripts JSON.

Tenemos que Añadir un Gadget tipo HTML, desde Diseño-->Elementos de página


El código básico es:

<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>

<script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> Entradas
<br/>
<script src="http://NOMBRE_BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> Comentarios

NOMBRE_BLOG tiene que ser obligatoriamente sustituido por el nombre del blog que figura en tu dirección, para completar la URL de los respectivos feeds.
ENTRADAS y COMENTARIOS son los rótulos que saldrán a continuación de las cifras que representan dichos datos. Pueden ser cambiados por otras palabras que creais conveniente.

Ahora que sabemos lo básico, para adornar la cosa podemos encerrar todo este código entre dos etiquetas DIV que incluyan un STYLE con los atributos CSS que queremos incorporar a nuestro texto. Un sencillo ejemplo, sería este:

<div style="font-family: Arial,Verdana; color:
#990000;font-size: 20px;text-align:center;margin:0px auto;">
CODIGO
</div>

Para aplicar un poco más de vuestro propio estilo, podeis añadir a la etiqueta STYLE, un atributo background-url con una imagen de fondo al gusto. En este caso, habrá que incorporar tambien al bloque contenedor (DIV), el ancho (WIDTH) y el alto (HEIGHT), coincidente con el de la imagen que queremos poner. Si además queremos hacer alguna filigrana, podemos poner la imagen como fondo de una tabla y luego meter en las celdas adecuadas los datos que queremos mostrar.

Opcion "Leer mas..."

Si acostumbramos a hacer entradas un poco largas (más de tres o cuatro párrafos), nuestra pantalla inicial (home) puede llegar a ser un calvario para los lectores que buscan algo concreto. En este caso, podría ser conveniente mostrar un pequeño resumen de cada post y que sea el lector el que elija si ver el resto de la información o no.

En resumen, el truco que se explica a continuación, mostrará las primeras líneas redactadas (a nuestro criterio) y a continuación un enlace para ver el post completo. Este esquema se repetirá en todas las entradas donde elijamos. Crearemos una clase llamada fullpost y todo lo que encerremos dentro, sólo será visible si se accede al permalink (la dirección concreta del post). Una vez más, es un truquillo antiguo, pero que muchos seguís preguntándome por correo cómo se hace, así que allá va.

En primer lugar, con artilugios expandidos, buscamos <div class='post-body'... El código a insertar se muestra en color verde.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>.fullpost{display:inline}</style>
<p><data:post.body/></p>
<b:else/>
<style type='text/css'>.fullpost{display:none}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Leer más...</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Una vez hecho esto, tendremos definida para siempre una clase (fullpost), que hará que lo que esté contenido en ella, no se vea si estamos en una página distinta de la del propio post, como sucede en el caso de la página Inicio. Lo que ocurre es que para que funcione con el efecto deseado, al redactar un post tendremos que incorporar esta clase manualmente. Nosotros elegimos que parte enseñar y que parte ocultar, en la forma...

Aquí irá todo el texto que siempre será visible (normalmente el principio, a modo de resumen)
<span class="fullpost">
Aquí vendrá el resto de la entrada, que no se verá en la página Inicio.
</span>

Esto hará que el post quede así:

Aquí irá todo el texto que siempre será visible (normalmente el principio, a modo de resumen)
Leer más...

Y cuando pinchemos en el enlace "Leer más...", se accederá al post completo.

Para automatizar al máximo la tarea, podemos ir al Panel de Control y en Configuración-->Formato, encontrareis un recuadro en blanco con el título Plantilla de entrada. Ahí tecleais...

VISIBLE
<span class="fullpost">
OCULTO
</span>

...y cada vez que creeis una entrada, os saldrá ese texto para no tener que estar recordando qué era lo que había que poner. Evidentemente, las palabras VISIBLE y OCULTO se tendrán que sustituir por los contenidos que queramos mostrar siempre y los que queramos esconder, respectivamente.

Pullquote. Entradas con estilo.

Usando CSS podemos dar un toque más profesional a nuestro sitio creando pullquotes. Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo. Por ejemplo una frase importante a modo de titular, extraída de una entrevista. Me resulta difícil dar una definición más concreta, así que a la derecha queda una imagen de muestra.

Para conseguir este efecto en nuestro blog, en primer lugar hay que definir una clase y colocarla con los atributos necesarios en nuestra plantilla, antes de ]]></b:skin>. Más adelante se ofrece un ejemplo.

Una vez creada la clase y ya redactando la entrada dónde queremos mostrar uno de estos cuadritos, sólo tendremos escribir el texto en el lugar donde queremos que aparezca, pero encerrado dentro de un SPAN con la clase del pullquote. Traducción de todo este rollo:

<span class="pullquote">Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada...</span>

Un pullquote es un elemento que se destaca dentro de una entrada...La clase llevará los atributos que sean necesarios para conseguir el efecto que os guste a vosotros. Imprescindibles son el FLOAT y el WIDTH. Conveniente el PADDING y el MARGIN. Todo lo demás es opcional. A continuación os mostramos un ejemplo con muchos más atributos para que podais quitar o modificar, que siempre es más fácil que añadir... sobre todo si no se sabe qué es lo que se puede añadir.

.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}

El efecto es similar  a los cuadraditos en prensa escrita...La subclase first-letter sirve para hacer la primera letra más grande que el resto del texto, pero como se ha comentado, esto es prescindible.

Si por el contrario, lo que queremos es complicarnos un poco -aparte del estilo definido en la clase- al redactar el post podemos ir añadiendo a ciertas palabras del texto del pullquote, efectos como cursiva, negrita, tamaño, color...

En SmileyCats, teneis unos cuantos ejemplos de pullquotes para que le echeis imaginación. Y ya puestos, de la misma manera pero más sencillo, podeis hacer otra clase para vuestras citas (blockquote).

Actualización 30-11-2008: Antonio nos hace saber que lo que aquí hemos llamado "cuadraditos de prensa escrita", son conocidos en el argot como sumarios. Gracias.

Copia de seguridad para entradas del blog

En diversas ocasiones me habeis preguntado como hacer una copia de seguridad de los posts publicados en vuestro blog. De momento, la opción que más me ha gustado ha sido la de Blogger Backup de Codeplex. Se trata de un programa de código abierto, que teneis que descargar (versión v1.0.9.23 Beta) a vuestro ordenador, descomprimir e instalar.

Salva tanto entradas como comentarios, pero a día de hoy, no es capaz de restaurar estos últimos. Suponemos que con el tiempo se irá solucionando este inconveniente, pero ya es una garantía tener a buen recaudo nuestro trabajo. Y si no que se lo pregunten a Pitufina y a otros muchos que también tuvieron el problema de perder el contenido de su espacio.

Como está en inglés, explicaremos un poco cómo funciona...

Una vez instalado el programa mediante el ejecutable setup.exe, tendremos el acceso directo BloggerBackup para arrancar el programa. La primera pantalla está prácticamente vacía. Pinchamos en el desplegable superior (1. Avalaible blogs) y se abre una nueva ventana para identificarnos como propietarios del blog.


Hay que teclear nuestro usuario (2) y contraseña (3) y pinchar en Log into Blogger and Get Blogs (4). Con esto, el programa nos mostrará en la parte superior, una lista de todos los blogs a los que tenemos acceso con esa identificación. Pinchamos en OK para cerrar la ventana.

Ahora en el desplegable Available blogs, aparecerán todos los que anteriormente se hubieran detectado. Escogemos aquel del que queramos hacer la copia y vemos como en el cuadro contiguo de abajo, aparece la direccion del blog y del feed. A continuación completaremos las opciones.

Save posts to folder: Aquí hay que indicar en que carpeta vamos a guardar los datos a salvar.
Backup File Naming: Sirve para configurar el nombre de los archivos y de la carpeta donde se guardarán. Los valores que salen por omisión parecen adecuados, pero si quieres cambiarlos lo podrás hacer entrando por este boton.
Overwrite existing backups?: Machaca los ficheros pre-existentes con los que se salvarán en esta ocasión.
Save comments: Si se selecciona, se guardarán también los comentarios.

Save posts as (format): Todo en un solo fichero (Atom, all posts in a single file) o cada post en un fichero independiente (Atom, one file per post). Salvo algún caso especial, recomendamos esta segunda opción.
Maximum posts per file: Si se eligió "todo en un solo fichero", ahora podemos escoger si queremos limitar el contenido a 100, 250 ó 500 entradas o realmente grabarlo sin límite de número.
Get only the most recent: Selecciona entre salvar todos los posts (No Limit. Get Them All) o grabar los 10, 25, 50 ó 100 últimos publicados
Only new posts since: Interesante opción para no tener que salvar el blog completo en posteriores ocasiones. Una vez que se tiene una primera copia de seguridad, aquí se puede seleccionar desde que fecha de publicación se quiere empezar a guardar.

Con Backup Posts, el aplicativo empieza a poner posts a buen recaudo. Poco más de dos minutos para salvar 500 entradas. Realmente una minucia de tiempo comparado con todo el que he invertido en crearlos.

---

Si algún día perdemos nuestros posts (más vale que no), en el desplegable de la parte superior (Avalaible Blogs), habrá que seleccionar el blog al que queremos subirlos de nuevo. Puede ser el mismo blog u otro cualquiera.

Al pinchar en Restore Post, nos saldrá una ventana emergente para seleccionar la carpeta dónde tenemos archivado lo anteriormente salvado. Hay que marcar todos los ficheros o escoger los que necesitamos y pinchar en Abrir. Si se nos olvida alguno o necesitamos otros de otra carpeta distinta, podemos añadirlos después mediante el botón Add Post(s).


Si es necesario, nos volvemos a identificar para tener acceso al blog y pinchando en OK, comenzamos a subir posts a toda pastilla.

---

Aparte del mencionado inconveniento con los comentarios, sólo he encontrado otro más, pero realmente sólo afecta a blogs como el presente. ¡Todo el código que se muestra de ejemplo se traduce y hay que volver a pasarlo a texto plano! :(

Transformar tu lista de blogs. Foto-blogroll

En esta entrada os mostraremos como funciona el gadget Lista de Blogs de Blogger, para que podais modificarlo y conseguir un blogroll adaptado a vuestras necesidades y/o diseño.

Lo primero que hay que hacer es agregar el artilugio desde Elementos de página, seleccionando el orden, la cantidad de blogs y los detalles que se quieren mostrar:

• Icono
• Título del elemento más reciente
• Fragmento del elemento más reciente
• Miniatura del elemento más reciente
• Fecha de la última actualización

Las modificaciones básicas de colores, fondos, tipo de letra, etc., son fáciles de realizar añadiendo nuevas clases antes de ]]></b:skin>. Habrá que usar los mismos nombres que Blogger le pone a los distintos elementos de los datos: contenedor, título, resumen, fecha actualización,...

Los nombres de dichos items así como la forma de redactarlos, ya se comentaron cuando la implementación del gadget. Si se colocan antes del <b:skin><![CDATA[/*, será necesario meter el código entre <style type='text/css'> y </style>, tal y como se indicó en su momento.

...

Pero puede que querais ir un poco más allá. En ese caso, en el siguiente enlace podreis ver el código completo comentado. Para modificar desde aquí, ya se requiere conocer algo de HTML, pero en el fondo sólo se trataría de cambiar el apartado que necesiteis, modificando o eliminando los bloques en que se configuran los datos de salida, o añadiendo etiquetas STYLE a las partes a formatear.

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<!-- ROTULO DEL WIDGET -->

<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>


<!-- PRINCIPIO BUCLE PARA MOSTRAR TODOS LOS ELEMENTOS -->
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>

<!-- LOGO PLATAFORMA -->
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>

<!-- PRINCIPIO BLOQUE NOMBRE, MINIATURA, POST, RESUMEN, FECHA ACT -->
<div class='blog-content'>

<!-- NOMBRE BLOG (CON ENLACE)-->
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<!-- PRINCIPIO BLOQUE PRINCIPAL -->
<div class='item-content'>

<!-- MINIATURA (CON ENLACE)-->
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>

<!-- TITULO DEL POST (CON ENLACE) -->
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>

<!-- RESUMEN DEL POST -->
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>

<!-- FECHA ULTIMA ACTUALIZACION -->
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>

<!-- FIN BLOQUE PRINCIPAL -->
</div>

<!-- FIN BLOQUE NOMBRE, MINIATURA, POST, RESUMEN, FECHA ACT -->
</div>

<div style='clear: both;'/>

</li>

<!-- FIN BUCLE PARA MOSTRAR TODOS LOS ELEMENTOS -->
</b:loop>
</ul>

<!-- ENLACE Mostrar todo PARA VER MAS BLOGS DE LOS PREDEFINIDOS -->
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<!-- LAPIZ DE EDICION RAPIDA -->
<b:include name='quickedit'/>

</div>
</div>
</b:includable>
</b:widget>

Por ejemplo, podemos conseguir una especie de foto-blogroll, borrando toda la parte de código que incluye los datos distintos de la miniatura. Si hacemos esto sin más, el problema será que las imágenes saldrán en vertical en fila de a una. A continuación teneis el código completo del gadget, para que salgan todas las imágenes seguidas, adaptándose al ancho del espacio disponible y con la información básica del post correspondiente al pasar el puntero por encima de cada imagen.

Hay que añadir el artilugio Lista de Blogs, seleccionar al menos la Miniatura y Guardar. Después se entra en Edición de HTML con artilugios expandidos. Todo el apartado Lista de Blogs desde <b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'> hasta </b:widget>, hay que sustituirlo entero por este otro.

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<div class='widget-content' style='margin:0 auto;text-align:left;width:95%;'>
<b:loop values='data:items' var='item'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:title='data:item.blogTitle + &quot; • &quot; + data:item.itemTitle + &quot; • &quot; + data:item.timePeriodSinceLastUpdate' expr:width='data:item.itemThumbnail.width' style='border: #cccccc ridge 4px;'/>
</a>
<b:else/>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='72' expr:title='data:item.blogTitle + &quot; • &quot; + data:item.itemTitle + &quot; • &quot; + data:item.timePeriodSinceLastUpdate' expr:width='72' src='http://img209.imageshack.us/img209/4421/iconojojn4.jpg' style='border: #cccccc ridge 4px;'/>
</a>
</b:if>
</b:if>
</b:loop>
<div style='clear: both;'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

El resultado si se deja en la sidebar, será algo parecido a la imagen de la derecha. Si quereis, también se puede trasladar a un bloque horizontal, por ejemplo encima o debajo de las entradas. Esto último lo podeis ver funcionando en Sin Entradas.

Este código incluye una condición para que muestre un dibujo estándar en el caso de que no exista imagen en el post. Es el ojo que se puede ver en el puesto 7 del ejemplo gráfico. También se ha incorporado un marco con el atributo BORDER que puede ser modificado al gusto.

El truco está basado en una idea de Miguelemele para su blog de fotografía, donde también lo podeis ver aplicado al final del blog. ¡Ah!... y el dibujito del ojo también es suyo.

Miguel también descubrió que las miniaturas son de un tamaño fijo de 72x72 px, por lo que si quereis mostrar otro tamaño, hay que escalar la imagen sustituyendo dentro de la etiqueta IMG, la expresión expr:height='data:item.itemThumbnail.height' por expr:height='NUMPIXELS' . Además, en la imagen para post sin idem, hay que cambiar el valor 72 por la misma cifra que coloquemos como NUMPIXELS.