Zona de Pruebas

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

Botones para las categorías ??

2007-03-02T06:44:00.000+01:00

¿Será esto tal obviedad que por eso no lo había visto comentar nunca?. ¿es que no se pueden usar directamente las URL de las categorías para mostrarlas?. Vamos a probar... la URL de una categoría en el nuevo Blogger viene siendo de esta guisa:

http://TUBLOG.blogspot.com/search/label/CATEGORIA

Ahora, para el ejemplo cogeremos una imagen cualquiera para probar

La dirección en este caso es /index.htlm

Ahora es /categorias

Si pulsas en el botón verás que te lleva a la categoría correspondiente.

Lo único que tenemos que hacer es crear un hipervínculo para cada imagen con la dirección de la categoría que queramos. Luego la podemos poner en la parte del Blog que más nos guste... que es tedioso... pues si, pero simple a más no poder.

En este caso he usado Blogger para subir las imágenes, de ahí el borde, que se podría quitar, pero para el ejemplo bien valen. Desde luego se pueden hospedar en cualquier sitio.

Lo que es evidente, es que este método es lento, aburrido y demasiado de andar por casa, pero si creas una imagen (Mapa de Imagen, que veremos como se hacen) en la que haya diferentes vínculos según la zona donde pinches con el ratón, puedes hacer una imagen para la cabecera con un logo o icono para cada categoría que tengas. Eso si, esto sería mejor hacerlo una vez que tu blog tenga ya las categorías bien definidas ya que para añadir cada una de ellas necesitas una imagen o un botón nuevo para poder linkearla a la dirección de la categoría.

Para acabar, dejo aquí unas cuantas páginas con Generadores de Botones para facilitar el proceso:
- Webtaller
- Starchat1
- Buttonator

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