RC - Aviones - Flying - Models

jueves, 3 de mayo de 2007

Tag Cloud Widget for Blogspot

Translate to English

Apareció el programador :)
Quise agregar a mi Blog, un Tag Cloud, para facilitar la tarea a los Search Engine, de paso les comento, no se por que Google me mantuvo en su índice una semana, luego el sitio fue excluido.
Encontré un blog donde explican el código de un Widget para Blogspot, http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html
http://phydeaux3.blogspot.com/2006/09/code-for-beta-blogger-label-cloud.html
Me pareció muy bueno pero le faltaba una vuelta de rosca para lo que yo pretendía.
En este Widget para Blogspot, el mayor problema que encontré, es que está hecho en JavaScript, esto impide a los Search Engine indexar el resto de los post/links.
Además al poner en el Widget en la columna derecha en la mayoría de los layouts, el search engine no llega, queda muy abajo.
Otro problema son los link, se arman con search, y no por el post
Me parece haber encontrado una vuelta interesante a este tema, con las instrucciones del Template.
Básicamente son tres secciones:
1.- Parametrización y Styles
2.- Loop para agregar los links
3.- Loop que setea los links con estilos al azar.

TODO: Me queda pendiente para una próxima versión agregar un limitador, tanto sea para las keywords o para los links

Dentro del Tag <b:skin><![CDATA[/* …. ]]></b:skin>
Agregue el siguiente style:
#Tags_Cloud{
background-color:#dfead5;
width:436px;
float:left;
position:relative;left:-18px;
top:-13px;
padding:10px;
}

Hay que expandir el contenido de los Widgets, para encontrar..
<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>

Justo debajo de esa línea implemente el Tag Cloud, así quedó arriba, al principio de los post, y antes de <b:loop values='data:posts' var='post'>

El código:

<b:if cond='data:blog.pageType != "item"'>
<div id='Tags_Cloud'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:post.url' expr:id='"TCloud" + data:post.id + data:label.name'><data:label.name/></a>
</b:loop>
</b:if>
</b:loop>
</div>

<script type='text/javascript'>
//Parametrización
var maxFontSize = 22;
var maxColor = [72,150,179];
var minFontSize = 10;
var minColor = [33,69,82];

function rnd(min,max){
num = max - min;
var rand = Math.random() * num;
rand = Math.round(rand);
return parseInt(min) + rand;
}

function setCloudStyle(link){

var color = new Array(3);

for (var i=0;3 > i;i++) {
color[i]=rnd(minColor[i],maxColor[i])
}

link.style.fontSize = rnd(minFontSize,maxFontSize)+'px';
link.style.color = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
link.style.textTransform = 'lowercase';
link.style.lineHeight = '110%';

// el 40% de las veces podría ser Bold
if (rnd(0,9) > 5){
link.style.fontWeight='bold';
}

// el 20% de las veces podría ser Italic
if (rnd(0,9) > 7){
link.style.fontStyle='italic';
}

}

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
setCloudStyle(document.getElementById("TCloud<data:post.id/><data:label.name/>"));
</b:loop>
</b:if>
</b:loop>
</script>
</b:if>

No hay comentarios:


 
website stats