RSS Reader Widget: lector de feed

Mirando los diversos borradores de post que tenía , encontré este post, que empecé a escribir hace tiempo, pero que lo guardé como borrador y se quedó ahí. Hoy lo termino y lo publico :)

Spring Widgets nos ofrece este bonito y práctico lector de feed al que podemos dar múltiples usos: para ponerlo en nuestra sidebar como una tabla que muestra nuestras últimas entradas o post; y también para que muestr los últimos comentarios que tengamos.

Para que muestre los últimos post:

♠ Para empezar entramos aquí . Cuando ingresemos nos mostrará cómo se verá nuestro lector cuando lo instalemos en nuesto blog.

♠ Luego, en la parte izquierda de nuestra pantalla, veremos dos botones; oprimimos Customize this widget ; una vez que oprimamos se espandirá un pequeño formulario.

♠ En el formulario debemos configurar el tamaño del lector de Feed.

♠ Ahora este es el paso más importante: para que el lector "lea" nuestro blog debemos de escribir nuestra dirección de Feed. Encontrará dos casilleros debajo de Feed URLs: uno con un pequeño "+" al costado y el otro un poco más grande; en el casillero grande es donde deben de colocar la URL de su Feed. Por ejemplo, en el caso de mi blog, la URL del feed es http://feeds.feedburner.com/diyva.

♠ Un poco más abajo (del formulario) encontrarán un botón con el que podrán personalizar el color de los bordes de su lector de feed.

Luego de estos pasos estamos preparados para colocar el lector en nuestro blog; hacemos click nuevamente en Customize this widget para que el formulario se recoja y oprimimos en Click here to Get the Code!

♣ Se abrirá una pequeña ventana con varios logos (de Facebook, Google, etc); en nuestro caso, hacemos click en el botón de Blogger.

♣ Luego, si deseamos, ingresamos nuestro correo y contraseña con la que accedemos normalmente a nuestro blog; o sino hacemos click en Get Code.

♣ Copiamos el código que aparecerá y lo colocamos en la sidebar de nuestro blog.


Si realizan bien todos los pasos el resultado será éste:

Get this widget!

Visit the Widget Gallery

Como dije al principio, no sólo le podemos dar este usos, sino que lo podemos usar como otra forma para mostrar una lista con los últimos comentarios de nuestro blog; de la misma manera, pero cambiando la dirección URl de Feeds por la de los comentarios.
El resultado es muy bueno.

Get this widget!

Visit the Widget Gallery

Espero que les guste y que les sirva.

Cómo eliminar el número de las etiquetas

He recibido con frecuencia esta pregunta, ¿cómo eliminar el número que aparece al lado de las etiquetas? Pues ahora les explicaré cómo se hace:

♠ Vamos a Diseño/ Edición de HTML y expandimos plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos:

<span dir='ltr'>(<data:label.count/>)</span>

En algunas plantillas pueden haber dos códigos iguales a este; el código que borraremos será el primero que encontremos y no el que se encuentra más abajo.
♠ Borramos toda esa línea y guardamos los cambios.

Aquí una muestra del antes y el después:

Nube de tags (etiquetas)

Son varios los que me preguntan cómo poner las etiquetas como las que se ven en mi sidebar, en forma de nube. No es difícil conseguirlo, pero sí requiere algo de paciencia.
Bien empecemos:

♠ Ante todo debes tener actiavadas las etiquetas; sino las tienes, ve a Diseño/ Elementos de la página/ Añadir un gadget / Etiquetas y damos click a guardar.
♠ Ahora nos dirigimos a Diseño/ Edición de HTML y damos click a Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos: ]]></b:skin> y antes de éste pegamos:

/* Etiquetas

----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

♠ Ahora, nuevamente con ayuda de CTRL+F, buscamos </head> y antes de este pegamos:

<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [204,74,122];
var minFontSize = 10;
var minColor = [200,112,12];
var lcShowCount = false;
</script>

Explicación:
» var maxFontSize: tamaño de fuente de las etiquetas que tengan varias entradas.
» var maxColor: color de las etiquetas que tengan varias entradas.
» var minFontSize: tamaño de fuente de las etiquetas que tengan pocas entradas.
» var minColor: color de las etiquetas que tengan pocas entradas.

♠ Bien, ahora en la plantilla buscamos lo siguiente:

<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Quizás el código de tu plantilla sea diferente a este, en todo caso fíjate en la primera línea y la última.
Selecciona todo el código anterior, bórralo y sustitúyelo por el siguiente:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

♠ Mira en vista previa y si todo salió bien, damos click a guardar.

Cualquier duda será bienvenida!

Widgets de Michael Jackson

Michael Jackson ha fallecido, es una gran pérdida para la música y para sus seguidores, pero lo que quedará para siempre será su legado musical.
Y revisando un comentario que dejaron en mi blog, encontré una web que pone a disposición widgets de Michael Jackson, con un diseño muy bueno y que están con animación flash.

La página es ILoveMichael.org y seguro muchos de sus fans pondrán alguno de estos gadgets en las sidebars de sus blogs.

Aquí les pongo uno que me gustó mucho:

Algunas preguntas frecuentes

Aquí una recopilación muy pequeña de preguntas frecuentes y los links de los post que responden a esas preguntas:

1º ¿Cómo eliminar u ocultar la navbar?



Es quizás una de las preguntas más frecuentes; en realidad les ofrezco más opciones aparte de eliminar u ocultar: personalizar y agregar un botón que muestre y oculte la sidebar. Estos post son:

► La barra de navegación (navbar)
► Botón para mostrar y ocultar la navbar

2º ¿Cómo agregar una segunda sidebar o columna?

Bastante sencillo, si queremos agregar otra columna adicional a nuestro blog, veremos el siguiente post:

► Agregar una segunda columna (plantilla Mínima)

3º¿Cómo mostrar los últimos post y comentarios?

Si queremos mostrar los últimos post, vemos la siguiente entrada:

► Mostrar los últimos post en la sidebar (forma sencilla)

Y si queremos mostrar los últimos comentarios, veremos una de las siguientes entradas:

► Últimos comentarios con fecha y título del post
► Últimos comentarios (forma sencilla)

Hay más preguntas que son algo frecuentes pero las tres que mencioné son las más frecuentes y espero que les sirva esta pequeña recopilación para hallar el post que buscan.

Sobre enlaces o links (2): abrir etiquetas en una nueva ventana

En una nota anterior habíamos visto algunos códigos generales sobre los enlace o links; hoy veremos cómo abrir solamente las etiquetas del blog en una nueva ventana.

Las etiquetas nos permiten, de alguna forma, buscar algún post o entrada mediante el uso de palabras clave. Ahora vamos aver cómo hacer para que solamente las etiquetas, no todos los enlaces, se habrán en una nueva ventana.
Para ello, seguimos los siguientes pasos:

♠ Vamos a Diseño/ Edición de HTML y damos click a Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos el siguiente código:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

En algunas plantillas hay dos códigos iguales; el que vamos a usar es el primero no el segundo.
Borramos el código anterior y pegamos el siguiente:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_blank'>

♠ Damos click a guardar y listo, sólo las etiquetas se abrirán en una nueva ventana, pero los demás enlaces no.

Link automático

En un comentario me hicieron una pregunta curiosa, ¿había alguna forma para un link se abriera automáticamente simplemente pasando el mouse por encima de éste? La verdad, no se me había ocurrido, pero indagando encontré la respuesta en un foro.

Sí es posible conseguirlo y además es muy sencillo. Bastará con poner esto:

<a href="URL" onmouseover="window.location=this.href">Aqui-nombre-enlace</a>

Donde cambiamos URL por la dirección de la página a la que queremos enlazar y cambiamos Aqui-nombre-enlace por el nombre que deseemos ponerle al enlace.

El resultado:

Wikipedia

► Y si deseas personalizar el enlace, mira este post