Aquí está el código y la informa
Aquí está
el código y la información de configuración para utilizar la nube de etiquetas
en la nueva versión de Blogger.
En primer lugar, obviamente, tiene que tener un blog en Blogger o crear uno
nuevo, y debe utilizar las plantillas de diseños, (Esto no está disponible para plantillas clásicas, o blogs publicados con FTP) y
debe tener algunas entradas o post con etiquetas o tags. (Es necesario que haya
al menos una etiqueta con más de una
entrada o sino dará error - entonces tienes que tener al menos una etiqueta con
más de una entrada antes de comenzar).
Asegúrese de hacer copia de seguridad de su plantilla antes de hacer cualquier
cambio!
Inicie sesión en Blogger e ir a la sección de
Diseño. En
la página de configuración del "Elementos de página" asegúrese
de que tiene un gadget Etiquetas ya está instalado en donde desees
(puede ser movido alrededor más
adelante) y no tienes haces clic en Añadir un Gadget y buscas el
denominado Etiquetas.
Luego,
vaya a la configuración de Edición de HTML y hacer clic en la opción
“Expandir plantillas de artilugios”. Esto hará que las cosas más fáciles de
hacer.
Ahora el código está disponible en 3 partes. Una sección de la hoja de estilo,
una sección de configuraciones, y luego el widget en sí.
La primera parte es para poner en la sección de hoja de estilos. El siguiente
código se debe copiar y se inserta en la hoja de estilos, que en los diseños
está marcado por las etiquetas de <b:skin>.
PASO 01:
Encuentra dentro del código html el siguiente texto:
]]></b:skin>
y
colocar justo ANTES de ese texto lo siguiente:
/*
Label Cloud Styles
----------------------------------------------- */
#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}
.
Listo el primer paso, copiar y pegar sin modificación en este momento. Voy a
explicar lo que puede ser ajustado más tarde.
PASO 02:
La siguiente sección es la sección de configuración de la nube. También va en la
cabeza de la plantilla, pero fuera de la parte de hoja de estilos.
Vuelve a ubicar dentro del código html el texto:
]]></b:skin>
Esta vez justo DESPUÉS de ese texto (pero antes de </head>) colocas el
siguiente código:
<script
type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Todos estos ajustes se pueden cambiar, pero los voy a explicar en un
momento. Los valores por defecto funcionan por ahora.
PASO 03:
Ahora toca encontrar el widget de etiquetas.
Ubica dentro del código html el siguiente texto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Luego reemplaza esa línea con el siguiente código:
<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>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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> |
Y
LISTO,
si todo ha ido bien, y tienes tus posts ya etiquetados, entonces hazle una Vista
Previa al blog
en el que se debe ver alguna forma de la nube. Si
no aparecen, entonces algo
salió mal. Probablemente
debería retroceder y volver a intentarlo desde el principio.
OTRAS CONSIDERACIONES
Ahora si
te sale el siguiente error:
<br/>Mensaje de error de XML: The element type "b:section"
En el
PASO 03, no solo debes reemplazar esa línea:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Si no
tambien tienes que reemplazar esa líneas y las siguientes, es decir reemplaza
todo esto:
|
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display +
"-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url
== data:label.url'>
<span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if
cond='data:showFreqNumbers'>
<span
dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url
== data:label.url'>
<span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if
cond='data:showFreqNumbers'>
<span
class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
|
CONFIGURACION
Los
ajustes en la sección de Variables es donde se hace la mayor parte de los
ajustes. Aquí voy a explicar cada uno de los ajustes.
var cloudMin = 1;
Esta configuración se puede utilizar para limitar el número de etiquetas que se
muestran (por ejemplo, si usted tiene un montón de etiquetas). Deje el valor en
1 para mostrar todas las etiquetas. Si usted entra en un mayor número, a
continuación, sólo las etiquetas que tienen al menos ese número de entradas
aparecerán en la nube.
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
Las líneas de
maxFontSize
maxColor
El
primero de ellos establece el tamaño (en píxeles) de la etiqueta con la
la mayor cantidad de entrada. El maxColor establece el color de esa entrada (en
formato RGB). Similar con los siguientes dos
minFontSize
minColor
Sólo se trata de la etiqueta con la menor cantidad de entradas. Una vez más el
tamaño en píxeles, el color está en formato RGB. Las etiquetas entre los dos
conseguirá su color / tamaño basado en el número de etiquetas que son, y donde
su número de registros cae, le da a la nube el tan deseado efecto.
De mi experimentación, hay muchos factores que hacen que una nube de aspecto
agradable. De color
/ tamaño disposición, el número de etiquetas reales, de lo bien que dispersa las
entradas están entre los las
etiquetas.
Tienes que
experimentar para ver qué se ve bien con tu configuración.
IMPORTANTE, al cambiar los ajustes de color, guardarlos en el formato
proporcionado. Entre
los [ ] y los
números separados por comas. Los
colores por defecto son de color azul para el máximo y el NEGRO para el min.
Usted puede seleccionar cualquier combinación válida de color RGB. Si
usted no sabe lo que son los colores RGB, no te
preocupes. Es
sólo una manera de definir un color. Puede
utilizar muchos gráficos en Internet para obtener
el valor correcto de RGB para el color que tu quieras probar. Aquí
hay uno que es bastante bueno.
RGB Color Code Chart
Recuerde, si usted consigue los 3 conjuntos de números debes ingresarlos en
forma correcta. Dentro de la [] separados por comas.
También puede experimentar con diferentes tamaños de fuente. Una
vez más, depende de cuántas entradas, cómo se dispersa ,
y cuánto espacio de la nube está disponible en cuanto a lo que se ve bien.
La última variable es
lcShowCount
Esto puede ser falsa (por defecto) o verdadero. Todo
esto hace es activar / desactivar el contador de mensajes que se muestra junto
a la etiqueta. Por
lo general, en una "tradicional" nube, la cuenta no se utiliza.
Pero si usted apunta a una lista
"Flat", entonces estaría bien algunas veces activarlas.
Ahora a la sección de CSS. La
mayoría de la gente no tiene que modificar esto mucho, y no es necesario entender
donde todas esas entradas van. Es
posible que desee cambiar para adaptarse.
La primera línea
#
LabelCloud {text-align: center; font-family: arial, sans-serif;}
Usted puede cambiar las fuentes utilizadas en la nube, si usted quiere.
Además, el codigo text-align también se puede cambiar. Lo
tengo configurado al centro por defecto, pero podría
utilizar
text-align: justify;
text-align: right;
text-align: left;
Si les acomoda mejor.
La siguiente línea
#labelCloud
.label-cloud li{display:inline;background-image:none !important;padding:0
5px;margin:0;vertical-align:baseline !important;border:0 !important;}
Bueno, no te preocupes por la mayor parte de él a menos que seas un hardcore
CSS'er.
El único realmente importante es la primera entrada
display:inline;
Usted puede cambiar esto a
display:block;
Para obtener la lista 'Flat' (cada entrada es una línea propia separada) de las
entradas ponderadas.
Por lo general, si está configurado para bloquear probablemente desee cambiar la
frecuencia del tipo alfabético a frecuencia. Usted
lo hace mediante la edición del widget de la pestaña Elementos de página en Blogger.
Y la última parte que voy a mencionar es la línea
#labelCloud
.label-count
Si establece la variable lcShowCount en true para mostrar el número de posteos,
se puede cambiar el color
/ tamaño de las entradas numeradas con esa línea.
Mejorado, actualizado y traducido de la
web
Multiline. 
