Top De Comentaristas En Blogger

En esta ocasión les traigo un gadget que muestra el nombre de los que más comentan en el blog y que he encontrado en Blogger Widgets. La diferencia con el anterior es que el enlace del nombre de cada comentarista lleva directamente a su perfil de Blogger o a su blog en el caso de que haya comentado con su url.

Tienes que añadir el código en un gadget HTML-Javascript y cambiar donde dice trucosblogg por el nombre de tu blog. El gadget muestra los 10 comentaristas más activos, si quieres mostrar más o menos, cambia donde dice &num=10 por el número que necesites. Para que tu nombre no aparezca en la lista, lo colocas (tal como lo use en el blog) sustituyendo al mio (everth21) en el código.

Si además quieres filtrar el nombre de algún otro comentarista, coloca sus nombre a continuación del tuyo separados cada uno por una coma.

Hay que tener en cuenta que la carga de las Pipes no es demasiado rápida, por lo que es conveniente ser prudente con el número de comentaristas a mostrar en la lista. Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.

• Top comentaristas basado en los últimos 500 comentarios del blog.
  

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Top comentaristas basado en los últimos 5000 comentarios del blog.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Sustituir la numeración de la lista por un icono.

Una vez colocado el gadget, su aspecto será como cualquier lista numerada pero podemos fácilmente sustituir los números de la lista por un icono.

[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos
<div id="topcoment"> al comienzo del código y </div> al final.
Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.

[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:

#topcoment li{
padding-left: 30px;
background: url(URL_DEL_ICONO) no-repeat top left;
}

Programar Las Entradas En Blogger

Hoy explicaré como podemos programar entradas en Blogger. Este servicio nos permitirá programar entradas cuando nos vayamos de vacaciones, vayamos a estar unos días fuera o sencillamente preveamos mucho trabajo y no podamos escribir.

El procedimiento para hacerlo será el siguiente:

1. En primer lugar, iremos a la pestaña entradas y escribiremos una nueva entrada.

2. Escribiremos nuestra entrada sin hacer ningún cambio aparente. Es especialmente importante que no lleguemos a pulsar la opción de publicar.

3. Posteriormente, hemos de pulsar “Opciones de entrada”, y en la fecha que nos aparece, la cambiamos por la fecha de publicación en que queremos que el mensaje sea publicado.

En caso de querer utilizar el cambio de fecha para crear una página de inicio en blogger, les recomiendo que sean este artículo que escribí hace algún tiempo.

Pagina De Inicio En Blogger

Explicare como hacerlo. Para ello utilizaré una técnica muy sencilla. Es cierto que existen técnicas más complejas modificando la plantilla e introduciendo un post en la plantilla pero creo que resultan muy complejas y no merecen la pena.

La solución que les explicaré es muy sencilla y la pueden observar en mi blog de descargas, en el que siempre hay 1 entradas al principio pase lo que pase.

Para hacer el truco en primer lugar procederemo a ir a la “Creación de entradas” y crearemos nuestra entrada con el mensaje que deseamos que aparezca de inicio cuando creamos una nueva entrada en blogger.

Una vez acabado el mensaje lo publicamos sin más. Comprobamos que el mensaje se haya publicado correctamente y posteriomente procedemos a ir a la pestaña de nuestro blogger de “Creación de entradas”, escogemos la pestaña “Editar entradas” y posteriormente pulsamos “editar” sobre la entrada que deseamos ver de inicio.

A continuación pulsamos en opciones de entrada que veremos que nos aparece en la parte inferior respecto a donde escribimos el mensaje.

A continuación, modificamos la fecha y la hora y seleccionamos una fecha muy lejana a la actual, por ejemplo el 2030 en lugar de 2008; una vez hecho esto publicamos la entrada, y hasta el 2030 aparecerá en primer lugar.

Esta solución no es para nada elegante pero sí muy sencilla, rápida y eficaz.

Añadir Metatags en Blogger

Las metatags son etiquetas con información sobre nuestro sitio, como puedes ser la tematica del sitio web o blog, su descripción, las palabras claves, su codificación, información del autor, el idioma, entre muchas otras. Son importantes por que apartir de estas los buscadores y otras aplicación clasificación tu web, de modo que sino las tienes dificiltas su trabajo y el resultado es menos visitas a tu sitio y visitas no relacionadas al tema de tu sitio.

Una de las partes más descuidadas en Blogger son precisamente las metatag, pues no coloca ninguna realmente de importancia para la indexación correcta de tu página. Bien, pues en este artículo te mostreremos como colocar las más importantes en la página principal y en las páginas de las etiquetas.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio, después a la opción “Edición HTML”

2. Busca el código siguiente:

<title><data:blog.pageTitle/></title>

3. Bajo de este código iran condicionales para mostrar los metatags en las páginas respectivas, de acuerdo con el siguiente esquema de código:

<!-- Metatags de la página principal -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='aquí las palabras clave separadas por comas' name='keywords'/>
<meta content='una descripción del contenido general del blog' name='description'/>
</b:if>

<!-- Metatags de cada página de etiquetas -->
<b:if cond='"http://direccion-de-la-etiqueta" == data:blog.url'>
<meta content='aquí las palabras clave que describen esta etiqueta' name='keywords'/>
<meta content='descripción del contenido de esta etiqueta' name='description'/>
</b:if>

Como puedes ver, hay un código para la página principal y otro para las etiquetas y tendra que repetirse para cada etiqueta que quieras describir con sus respectivos contenidos.

Post Resumido (Leer Más) En Dos Pasos

Acabo de encontrar este SCRIPT en Quite Random y es sencillamente... cómo decirlo: ¡sencillo! Allí citan que el creador es BloggerSphera.

Sólo con dos cambios, podemos conseguir un blog estilo magazine. Incluye un resumen de las entradas e incorpora una imagen si el post tiene alguna. Por supuesto, incluye el consabido "leer más" y lo que es mejor, sin necesidad de incluir nada especial al crear tus entradas. Oséase... automático. Además, como no es muy largo se puede insertar directamente en la plantilla para no depender de servicios de almacenaje externos.

Quizás el único fallo es que necesita escalar la imagen para que todas se vean igualitas, en lugar de recortarlas que quizás sería lo óptimo. No obstante, el resultado me ha parecido muy bueno. Ver Blog De Demostracion.

Y sin más preámbulo, el montaje del sistema:

Paso 1. Localizar el </head> y justo antes insertar este código que incluye el estilo y el SCRIPT.

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.leermas {
}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.centrar-imagen {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<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 = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = sumario_img;
}
else {
imgtag = '<img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
sumario_noimg = 340;
sumario_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Paso 2. Busca la línea <p><data:post.body/></p> y la sustituyes por esto otro.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Puedes ver el resultado con Vista Previa y si te gusta, guardarlo.

Con esto ya tienes algo bastante majo, pero puedes personalizarlo un poco con las clases que se nombran en primer lugar y con los últimos parámetros del código del SCRIPT:

* .leermas: Aspecto del enlace, como color, tamaño, tipo de letra fondo. También se puede añadir un HOVER.
* .post-thumbnail: Tal como está, la imagen flota a la derecha. Se puede cambiar a la izquierda.
* .centrar-imagen: Esta clase se usa cuando se escoge (más adelante) que la imagen no flote. En ese caso, la centra.

* var thumbnail_float: Valor TRUE para que flote. FALSE para que se centre encima del texto del sumario.
* sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
* sumario_img: Idem para post con imágenes. Normalmente menor que en el anterior caso para que ocupen más o menos lo mismo.
* img_thumb_height: Altura de la imagen miniatura en pixels.
* img_thumb_width: Anchura de la imagen miniatura en pixels.

Colocando imágenes alargadas tipo banner al principio de los posts, puede resultar muy interesante poner la variable var thumbnail_float con el valor FALSE y un ancho grande (por ejemplo 400x90px), para que simule cabecera de post.