Navegación con Ajax

que no es el nombre de un estropajo, ni de ningún producto de limpieza, jjajaaa, sino uno de esos sistemas con que los codificadores nos hacen más simple la vida en la construcción de los blogs.
Lo primero que hay que decir, es que este sistema es absolutamente incompatible con otros sistemas de navegación, tipo Peek-A-Boo, barras de menú, etiquetas en Artículos o Categorías, Tablas de Contenidos, etc. De manera que si queréis usarlo HA DE SER A SOLAS.

Por ese motivo no lo he insertado en mis blogs de hacks: me gustan demasiado mis Artículos y demás como para renunciar a ellos. Pero sí lo he usado en mi blog de CUENTOS: Si entráis, podéis picar en cualquiera de las etiquetas de la sidebar... veréis un "loading" y, a continuación, se os desplegará, bajo la cabecera, las entradas con esa etiqueta, reseñadas por páginas, y con un resumen de cada una de ellas.

La verdad es que es muy práctico y bonito este sistema.

La idea original la podéis encontrar en Blogger Hacked, y su traducción al español, realizada por Leonel, en Trucos Blogger, así:

1º.- CSS-script: Id a Edición de Plantilla y expandedla: podéis colocarl este código antes del cierre / "head"

<style type='text/css'>

#indicator {

position:fixed;

z-index:1000;

padding:15px 0;

top:40%;

background-color:#FFFFFF;

border:1px solid #000000;

width:176px;

left:50%;

margin-left:-88px;

text-align:center;

}

#search-result {

border:1px solid #AAAAAA;

padding:10px;

padding-bottom:30px;

font-size:85%;

}

.search-result-meta {

background:#EFEFEF;

padding:2px;

}

.search-result-meta img {

border-width:0;

vertical-align:

text-bottom;

}

.search-title{

font-size:1em;

padding-bottom:3px;

font-weight:bold;

text-align:left;

text-decoration:underline;

}

.search-cat{

display:block;

padding:3px;

font-size:1em;

margin-top:5px;

margin-bottom:5px;

border-bottom:1px solid #C0C0C0;

font-weight:bold;

}

.search-close {

color:silver;

float:right;

border:1px solid #F5F5F5;

margin-top:10px;cursor:pointer;

}

.search-result-nav {

font-size:1.4em;

font-weight:bold;

padding:5px 0pt;

text-align:center;

}

</style>



<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

// Parametros Personalizables por el Usuario

// ----------------------------

// maxresults - Numero de resultado de mostrar por pagina

// navFlag - Poner Navegacion ON o OFF. Dar 1 para ON y 0 para OFF.

// feedLabel - Text to show for the label feed link.

// catLabel - Etiqueta para categorias.

// closeLabel - Etiqueta para boton Cerrar. Tu puedes usar hypertexto tambien.

var maxresults = 5;

var navFlag = 1; //ON por defecto

var feedLabel = "Suscribir a";

var catLabel = "Categoria:";

var closeLabel = "Click para cerrar";

//]]>

</script>

<script src='http://bloggerhacked.googlepages.com/ajaxlabels.js' type='text/javascript'/>

Yo modifiqué algo el CSS para diseñarlo a mi manera y que me quedara más "mono". Cada quien... ya sabe: a la suya :)

2º.- HTML:
Buscad esta tag: <b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

y sustituidla por ésta:

<b:loop values='data:post.labels' var='label'>

<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

ITEM MAS:

Si ya tenéis un elemento ETIQUETAS en vuestra plantilla, además de lo anterior, habréis de "descubrir"- en vuestra plantilla extendida, probablemente en la sección de sidebar- ese widget (tendrá la ID "Label" y el "title" que le hayáis puesto). Ahí reemplazaréis esta condicional: <b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a href='data:label.url'><data:label.name/></a>

</b:if>


por ésta:

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>

</b:if>

4º.- mirad que no exista ningún "desastre" en "Vista Previa" y guardad la Plantilla. Ahora debéis añadir a vustro blog el "widget" que podéis picar en Trucos o en Blogger Hacked, donde queráis... se añadirá un elemento de página nuevo en vuestra sidebar, por defecto, y allí es dónde se os mostrará este sistema de navegación.

Ahora bien: personalmente, no me gusta nada que ese resumen de mis entradas por etiqueta se vea en la sidebar: no queda nada guapo.
Yo he preferido mostrarlo sobre las Entradas del Blog y, para ello, acudí a Edición de plantilla, la expandí y bajé hasta el widget y sección "Entradas del Blog". Allí añadí, tras el "id main" ésto:
maxiwidgets="2" showaddelement="yes";

de manera que queda así la sección:

<b:section class='main' id='main' maxiwidgets='2' showaddelement='yes'>

Ahora, si miráis el Diseño de vuestra plantilla, veréis que hay un "Añadir Elemento" sobre "Entradas del Blog". Ahí es dónde colocaréis el contenido HTML del widget "automático", de forma que el sistema de navegación se despliegue ahí.

Y creo que... nada más...

Para que las etiquetas no queden muy "sosas" podéis, p.e., colocar unas pestañas verticales, que quedan muy guapas, y que podéis elegir en Exploding Boy (¿A que son guapas?: yo tengo unas en este blog... con algún añadido) y aprender a insertarlas con Hoctro's Place o.. en Ayuda&Kaos, que ya lo tengo explicado, o en Trucos Blogger...