Zona de Pruebas

Aorta Widget

2008-06-27T18:35:00.006+02:00

Saludos de nuevo, ya hacía mucho tiempo que no me dejaba caer por aquí y la verdad es que aunque quería retomar un poco mi afición a esto de aprender un poquito sobre Blogger, entre unas cosas y otras no he podido. Así que hoy me cuelo 5 minutos y os comento un widget muy interesante que he visto últimamente. El widget nos lo brinda una vez más Hans de Beatiful Beta. Aorta es un artilugio con el que mostrar tus entradas de Blogger... pero no se queda ahí la cosa, ya que a estas alturas eso está ya más que sabido. La ventaja es que en este Widget ,es que es capaz de mostrar las actualizaciones de nuestro Blog, enlaces a nuestros vídeos de Youtube, álbumes de Picassa e incluso a las imagenes de Flickr. No requiere conocimientos previos para instalarlo ya que basta con ir a la página de instalción y rellenar el formulario. Una vez hecho, automáticamente se instala en nuestra plantilla (previo permiso, claro) y posteriormente desde nuestra página de diseño del Blog ubicarlo donde más nos convenga.

Formulario para instalar el widget.. ya veis que es muy sencillo

Nota: Antes de nada deberéis instalar en vuestra plantilla un script para permitir la instalación de widgets desde Beatiful Beta. Si es vuestro primer widget de esta página mirad primero esto.

Post aleatorio

2007-09-13T13:23:00.000+02:00

Si alguna vez has visto o te has interesado por el sistema de blogs de Wordpress habrás visto que es un widget bastante habitual en las páginas que usan este sistema el "Salta". Es un link en el cual cada vez que pulsamos nos llevará a una entrada aleatoria del blog, haciendo la navegación bastante entretenida y siempre distinta. Desde luego para este blog, la posibilidad de visualizar entradas de manera aleatoria quizá no sea de mucho interés, ya que los que llegan hasta aquí buscan algo en concreto, un código o una ayuda y desde luego es mejor navegar a través de las categorías... etc para encontrar lo que buscamos. Sin embargo hay muchos blogs que tratan temas muy diversos, humor, videos, o lo que sea en los que este widget puede cobrar interés, ya que el propio autor se puede sorprender al encontrar entradas que ya ni recordaba...

Todo esto que os cuento es porque ahora podemos usar este mismo sistema en Blogger gracias a Phydeaux3 (uno de los más famosos blogs de ayuda que pululan por la red). Par no entrar en complicaciones, su instalación pude hacerse de manera manual copiando el script en la plantilla y luego situando el vínculo donde queramos, o bien, lo más recomendable, hacerlo de manera automática y luego cambiando aquellas cosas que queramos modificar.

No tenéis más que ir a la página de instalación y darle a un botón para instalrlo en nuestra plantilla. Automáticamente nos llevará a la vista de diseño de blogger y lo movemos a la columna o zona que más nos convenga. Guardamos los cambios y ya está instalado.

Si nos vamos a nuestro Blog veremos que tenemos el Widget situado en donde decidimos antes y si tenemos la sesión de Blogger iniciada podemos editar el código clickeando en el botón de "Quick Edit" que veeremos en cada uno de los widgets de nuestra página.

El código que veremos será:


<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'VINCULO'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

La zona en rojo será el texto que escojamos para el vínculo (Salta, navega, pulsa para post aleatorio... etc) o bien podemos optar por una imagen con su texto. Para ello tendremos que usar las etiquetas IMG. Por ejemplo, tenemos la imagen de una flecha y queremos mostrarla en el vínculo seguido de la palabra "salta", bien, pues esto será lo que pongamos en la zona en rojo:

<img src="URL DE LA IMAGEN"/> Salta

Con esto ya debería ser suficiente para tenerlo listo.
Podéis ver que en la segunda columna lateral de este blog me he animado a usar este truco, probad, probad.

FeedJit

2007-09-10T20:05:00.000+02:00

Una utilidad que a los amantes de las estadísticas y el tráfico de la página a buen seguro que les gustará. En un principio,cuando lo vi en Gem@blog, aunque la idea me pareció atractiva no le hice mucho caso ya que no era demasiado personalizable y a mi no me gusta encontrarme la plantilla llena de widgets de diferentes tamaños y colores llamativos. Soy más de la idea de mantener un tono o al menos procurar que la apariencia de una página sea más o menos uniforme. Ahora el widget es plenamente configurable en tamaños y colores con lo que es más fácil el hacer que encaje mejor en cualquier tipo de plantilla.

Entre las utilidades encontraremos un localizador en tiempo real de las visitas que nos llegan y de donde llegan. Un ejemplo:

Además también podremos ver las visitas recientes según su ubicación geográfica:

Todo ello de la manera más sencilla y sin tener que registrarnos en ningún sitio, simplemente pasar por la página de Feedjit y configurad vuestros propios widgets.

Encuestas en Blogger

2007-07-15T03:03:00.001+02:00

Hacía ya bastante tiempo que no me pasaba por la página de diseño de Blogger... entre otras cosas ando bastante liado y de hecho este blog necesita rápidamente actualizar sus contenidos, pero el caso es que hoy, echándole un cable a un amigo en su página, me he encontrado que los chicos de Blogger han incluido un nuevo elemento de fácil instalación en nuestros blogs: Las encuestas. Hasta ahora existían muchos métodos para poder incluir encuestas en la página, pero muchas de ellas necesitaban de terceros para funcionar, con el engorro que ello supone. Con motivo de esto he probado el sistema, que a mi me parece bastante sencillo, pero eficaz y he creado una pequeña encuesta sobre las encuestas ;) para probar. Para todos aquellos que no suelen entrar en las páginas de diseño del blog, avisarles de que desde ya tienen esta posibilidad y es francamente fácil de usar.

Para los más intrépidos o aquellos que suelan tener encuestas en sus páginas pueden meterse de lleno en la personalización buscando el widget de encuestas en su plantilla. Esto es lo que nos vamos a encontrar:

<b:widget id='Poll1' locked='false' title='TITULO ENCUESTA' type='Poll'>
<b:includable id='main'>
<div class='widget-content' id='widget-content'>
<h2><data:title/></h2>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='"poll-widget" + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
<b:include name='quickedit'/>
</div>

Calendario de Posts

2007-04-20T10:37:00.000+02:00

Si veis el calendario que hay en la primera columna lateral de esta misma página podreis ver más o menos de lo que se trata. Este truco consigue sustituir el sistema de "archivos" de blogger por un calendario interactivo en el que podremos revisar nuestras entradas en función de la fecha. El truco requiere un par de incursiones por la plantilla, pero se pueden hacer en un mismo paso. Lo único que hay que hacer, como siempre, es hacer previamente una copia de nuestra plantilla para evitar problemas y después nos ponemos manos a la obra.

Localizamos en nuestra plantilla el cierre </head> y nos ponemos a trabajar justo encima. El truco consta de dos códigos que para ahorrar tiempo pondremos en un solo paso:

<script src='http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js' type='text/javascript'/>
<link href='http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>
//<![CDATA[
/*
Created by: PurpleMoggy
http://purplemoggy.blogspot.com
*/

var _yourBlogUrl = "http://karalletest.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this

_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);

var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

YAHOO.namespace("example.calendar");

function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};

var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();

document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

checkPostsForMonth(month, year);
};

function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function checkPostsCallback(json) {

if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;

if (day.substr(0,1) == "0") {
day = day.substr(1);
}

document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

}
YAHOO.example.calendar.cal1.render();
}

document.getElementById("cal1loadimg").style.display = "none";

};

function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}

var myCustomRenderer = function(workingDate, cell) {

var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}

cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;

}

var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];

var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];

if (day.toString().length == 1) {
day = "0" + day;
}

if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day +
"T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day +
"T23%3A59%3A59" + _yourBlogTimeZone;
}

};

var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}

var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());

var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());

var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}

YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};

YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>

Las zonas en rojo se corresponden con la dirección de la página donde lo instalemos y con la zona horaria en la que publicamos los posts.

Después, una vez guardada la plantilla vamos a la página de diseño y añadimos un elemento como HTLM al que podemos titular como mejor nos convenga. El Widget en cuestión es este:

<div id="cal1wrapper">

<div id="cal1select">

<select id="cal1monthselect" name="cal1monthselect">
<option value="0"/>Enero
<option value="1"/>Febrero
<option value="2"/>Marzo
<option value="3"/>Abril
<option value="4"/>Mayo
<option value="5"/>Junio
<option value="6"/>Julio
<option value="7"/>Agosto
<option value="8"/>Septiembre
<option value="9"/>Octubre
<option value="10"/>Novimbre
<option value="11"/>Diciembre
</select>
<select id="cal1yearselect" name="cal1yearselect">
<option value="1995"/>1995
<option value="1996"/>1996
<option value="1997"/>1997
<option value="1998"/>1998
<option value="1999"/>1999
<option value="2000"/>2000
<option value="2001"/>2001
<option value="2002"/>2002
<option value="2003"/>2003
<option value="2004"/>2004
<option value="2005"/>2005
<option value="2006"/>2006
<option value="2007"/>2007
<option value="2008"/>2008
<option value="2009"/>2009
<option value="2010"/>2010
<option value="2011"/>2011
<option value="2012"/>2012
<option value="2013"/>2013
<option value="2014"/>2014
<option value="2015"/>2015
<option value="2016"/>2016
<option value="2017"/>2017
<option value="2018"/>2018
<option value="2019"/>2019
</select>
<input id="cal1dateselect" value="-->" type="button"/>

</div>

<div id="cal1Container"><img style="vertical-align:middle;
" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img style="vertical-align:middle;" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Cargando...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>
Un vez ubicado en donde más nos guste y guardados los cambios ya estará listo. Tenemos un estupendo sistema de archivos incluído en el calendario en el que con tan solo pasar el ratón por el día seleccionado veremos los posts que se hicieron en esa fecha.

Este truco es obra y milagro de PurpleMoggy, al que desde aquí le doy las gracias. ;)
Si teneis algún problema en la instalación ya sea porque algo no se entiende o por algún posible error al mostrar el código en el post (a veces, al transformar los <> para que se puedan mostrar se puede cometer algún error...), pasaros por la página original del truco para verlos mejor.

Tabla de Contenidos

2007-04-12T23:51:00.000+02:00

Ya habíamos visto como poner los contenidos de nuestro blog según las categorías de cada uno de nuestros posts. Ahora vamos a ver algo parecido, pero que a mi me ha encantado y es que podremos ver TODOS nuestros posts listados por fecha y categorías en un perfecto orden alfabético y todo expandible y retraíble en nuestra página principal. Este truco me ha parecido de los mejores que he visto últimamente y como tantos otros se lo debemos a Beatiful Beta, que ultimamente está realmente activo y como es de ley, en Zona de Pruebas lo hemos puesto a eso... a prueba. El resultado es excepcional así que os comento cómo y qué hacer para ponerlo en vuestro blog. Si quereis saber un poco más de que se trata antes de poneros manos a la obra no teneis más que probar la "Tabla de Contenidos" de mi segunda barra lateral.
Tenemos que realizar unos cuantos pasos previos:
Lo primero, como siempre, es hacer una copia de seguridad de nuestra plantilla por lo que pueda pasar. El truco comienza en la plantilla de HTML si aún no hemos habilitado la zona superior de los posts para introducir elementos, así que si es el caso, primero hay que modificar la plantilla para permitirlo y lo podeis ver paso a paso en este otro post. Ahora nos vamos a la página de Diseño de nuestro Blog y justo encima del área de Posts añadimos este código como HTML y sin poner ningún título:

Guardamos los cambios y nos vamos a la columna lateral en donde queramos poner el truco en cuestión. Me refiero simplemente al vínculo que hará que se muestre u oculte el listado de posts, ya que la tabla se mostrará siempre en el área principal del blog, justo encima del post que tengamos al principio. Añadimos como HTML este código:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://TUBLOG.blogspot.com/feeds/posts/default?
alt=json-in-script&max-results=999&callback=loadtoc"></script>

Cambiar TUBLOG por el nombre del Blog donde lo estemos instalando.

El último paso es pegar los "estilos" que tendrá la tabla de contenidos. Es totalemente editable a gusto de cada uno, pero como ejemplo pondré el que estoy usando yo ahora mismo, que es igual que el de la fuente original excepto el color y el ancho, para ajustarlos mejor a mi diseño.

Los estilos se pueden poner en la zona <b:skin> de nuestra plantilla, pero yo he tenido problemas así que la solución más sencilla y que además facilita mucho la localización del código es introducirlo como un elemento HTML justo encima del código del script que hemos puesto en el paso anterior. El código para los estilos es el siguiente:

A partir de ahora podremos mostrar u ocultar nuestra tabla de contenidos (últimos 100 posts, aunque ya existe la manera de mostrar todos, pero ya se explicará si fuera necesario...). La tabla mostrará 3 columnas. En la primera veremos los títulos de los posts ordenados alfabéticamente y vinculados a su página correspondiente, de manera que podremos ir a cualquier artículo de la lista con un simple click. En la segunda columna veremos la fecha en la que fue editado por última vez ese post y en la tercera veremos las categorias bajo las cuales fue publicado con el añadido de que si pulsamos en las categorías listadas podremos hacer un filtro de la tabla para que sólo muestre los artículos de esa categoría en concreto. Por si fuera poco, permite ordenar el listado en función del título o de la fecha con tan sólo pulsar en el título de la columna que queramos y además, si hacemos filtrados por categoría y queremos ver todas nuevamente, no tendremos más que pinchar en el título de la columna de las categorías. No me digais que no es un truco realemente impresionante. :D

Contenidos por categorías

2007-04-04T19:41:00.000+02:00

Es otra manera interesante de presentar las categorías, pero con un par de ventajas. Una es que nos muestra las entradas de cada categoría por separado y la otra es que podemos hacer que muestre sólo alguna de las categorías. El truco está explicado en alguno de los comentarios del blog, en otro apartado, pero como es de ley vamos a dedicarle un post. El código completo lo podeis copiar de la página del creador original del truco. Su instalación es sencilla. No teneis más que ir a la edición de HTML de vuestra plantilla y EXPANDIR la plantilla de WIDGETS. Una vez allí, buscamos una zona cualquiera del blog para colocarlo (nunca en el MAIN, ya que no nos deja poner widgets en el área dedicada a posts), ya que luego desde la plantilla de DISEÑO lo podremos mover sin problemas. Una vez seguros de que estamos en la zona de la plantilla adecuada, buscamos el cierre de un WIDGET identificado por <b/widget> y pegamos a continuación el código que copiamos de la página original del truco. Después tenemos que cambiar una serie de parámetros en el widget, que son:

var homeUrl2 = "tublog.blogspot.com";
var labels = ["categoria","categoria2","categoria3"];

Como veís no hay más que añadir la URL de tu página y añadir entre comillas el nombre de la categoría que quereis que se muestren. Aquí está el problema, el widget no identifica más que tres palabras para cada categoría y también tiene problemas con los acentos y las "ñ" con lo que habrá que tener cuidado como nombramos nuestras categorías si queremos usar este truco.

Otra cosa a tener en cuenta es que no a todo el mundo le interesa que se muestren los títulos de cada categoría encima de los vínculos a las entradas, cosa que le ocurría a uno de nuestros habituales, Batto de Ramen Para Dos. Si ese es vuestro caso no teneis más que buscar una línea de código en el widget y borrarla. La línea en cuestión es esta:

h.appendChild(txt);

Feeds y categorías

2007-03-10T00:57:00.000+01:00

Un estupedo Widget con el que mostrar las categorías de nuestro blog y al mismo tiempo ofrecer sindicación para cada una de ellas por separado. La instalación puede hacerse de diferentes maneras, pero aquí os dejo la manera más "compacta" y sencilla que no requiere scripts ni modificaciones complejas en el modo de edición HTLM de nuestra plantilla. Simplemente hay que introducir este código justo después de un widget (tras el <:b/widget>)

<b:widget id='Label50' locked='false' title='Feeds' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

La línea en rojo se corresponde con la dirección de la imagen que aparecerá justo delante del nombre de cada categoría. Evidentemente se puede cambiar por la que creais que se ajusta mejor a vuestro diseño.

Hay que tener en cuenta que es casi seguro que en tu plantilla ya exista un widget cuya id=´label´así que en mi caso lo he llamado label50, pero se puede cambiar la numeración para evitar que coincida con alguno de vuestra plantilla. Después de haberlo instalado no tendremos más que ir al diseño de nuestro blog y colocarlo en donde más nos guste. Para verlo funcionando no hay más que echar un vistazo en la columna lateral derecha de este mismo blog.

Gracias a PurpleMoggy´s Blog

Mostrar categorías como "Etiquetas"

2007-03-01T00:34:00.000+01:00

Recientemente he cambiado la plantilla de la página y he añadido un par de cosillas nuevas que aún no había pasado a comentar. La más llamativa, que ahora recuerdo haber puesto, son las categorías que veis bajo el título del blog, que como veis, son funcionales.

No es un truco especialmente complejo, pero si es fácil hacerse un lío y además necesita que se haya retocado la plantilla con un par de trucos previos. Lo primero es adecuar nuestra plantilla para que se puedan añadir widgests en la cabecera (ver enlace para saber como).

El siguiente paso es definir el estilo de las pestañas que vamos a añadir al blog. Podemos copiar sólo la parte de la pestaña que queramos, pero yo recomiendo copiar todo el código por si en algún momento queremos cambiar el diseño:

/*- Menu Tabs A --------------------------- */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Una vez tengamos el código, lo pegamos en nuestra plantilla justo encima de la etiqueta de cierre /b:skin que a su vez está encima del cierre de /HEAD (que este seguro que está más localizado a estas alturas ;) )

El último paso es el añadir el wisget en si a nuestra plantilla así que pegamos el código siguiente justo tras el cierre de cualquier widget (hay que trabajar con la plantilla con widgets expandidos)

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</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>

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

Y ya está listo, sólo hay que cambiar la letra en rojo por aquella que queramos para cambiar el estilo... siempre y cuando hayamos copiado todos los estilos a nuestra plantilla.

Problemas que puedan surgir:

Obviando los evidentes de errores al copiar o pegar el código en zonas erróneas de la plantilla, un problema habitual es que estemos intentando duplicar el widget label (porque ya existe en la plantilla un widget de etiquetas). Esto se puede solucionar renombrando el widget. (widget id=´"label2"... "label3"...etc).

Otra opción es, si no se van a tener varios sistemas de categorías a la vez, es eliminar las ya existentes antes de empezar.

Original de Hoctro

Muestra tus categorías en diferentes estilos

2007-02-27T06:17:00.000+01:00

Existen multitud de códigos, widgets, scripts... etc que permiten mostrar las categorías de tu Blog con distintas apariencias. Algunas permiten mostrarlas como un menú, otras permiten colgar una nube de etiquetas en el blog en las que cada una de las categorías tiene un tamaño de letra diferente en función de los posts que se alojan en ellas. Además, tampoco está nada mal el sistema que nos trae Blogger por defecto, en el que vemos cada categoría con el número de posts relacionados. Pero mucho mejor que todo esto, es contar con todos esos estilos a la vez. Eso es lo que vamos a aprender en este post y como es habitual en este blog, no va a ser demasiado complicado :P ... si no, yo tampoco la habría logrado.

Antes de empezar tenemos que asegurarnos de que no haya un sistema de categorías previamente instalado, así que iremos a la plantilla de diseño y borraremos el sistema actual de categorías. Una vez hecho esto, nos iremos a la plantilla y buscaremos la etiqueta de cierre de uno de los widgets de nuestra barra lateral </b:widget> (yo no me preocuparía de buscar un lugar idóneo de momento, ya que luego podremos moverlo facilmente desde la Plantilla de Diseño). Justo a continuación pegaremos este código:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
<b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Guardamos la plantilla y nos vamos a la plantilla de diseño para ubicarlo en el lugar que más nos guste.

Así de sencillo resulta ;) Ya tenemos instalado el nuevo sistema de categorías y ya sólo nos quedará personalizarlo un poco. Veréis que desde la plantilla de diseño no nos deja cambiar el título del Widget y por defecto, está en inglés. Para cambiar esto y un par de cosas más tendremos que hacerlo directamente sobre el código que hemos pegado.

Para cambiar de Multi-Style Labels a lo que queramos.. por ejemplo: Categorías, tenéis que buscar esta línea, justo al comienzo del widget:

<h2>Multi-style Labels</h2><br/>

También podemos aprovechar para cambiar los textos de los botones para cambiar de estilo así que busca en el código las siguientes frases y las cambias por las que quieras:
"switch to menu", "switch to list", "switch to zoom" y "select a label"

Como tantas otras cosas... se lo debemos todo a Hackosphere

Beatiful Beta Auto Widget Install

2007-02-21T12:25:00.000+01:00

Esta herramienta, además de ser muy pero que muy fácil de instalar en nuestra plantilla nos la dejará lista para poder luego meterle mano con los muchos widgets que Beatiful Beta oftrece, entre los que recomiendo el de "Últimos Comentarios" y "Buscador" que pondré aquí más adelante.

Lo único que deberemos hacer es introducir una línea de código enre los HEADS de la plantilla.

La cosa debería quedar algo así:

<head>
.
.
.
.
.
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
.
.
.
</head>

Guardad vuestra plantilla y ya la teneis lista para acceder a los widgets de Beatiful Beta, que repito, algunos son realmente interesantes, como por ejemplo el Buscador, los Últimos Comentarios y los Posts Recientes. Todos estos Widgets los podéis encontrar aquí, y una vez introducida la lína de código no tendréis más que pulsar en el botón y esperar a que acabe el proceso. Para evitar errores, es recomendable que tengáis iniciada la sesión en Blogger. Después, como siempre, podréis cambiar y retocar el código a vuestro gusto.