Categorias recargadas con ajax para el Blog.

Hola, si dan click en mis etiquetas podran ver que se abre un cudro donde dice cargando y al lado una imagen, luego se abre un cuadro con los ultimos post, bueno si te gusta aqui el truco:

1.- En tu HTML pega el siguiente codigo antes del /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'/>

2.- Buscar la siguiente linea de codigo en tu HTML:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

3.- Y remplazalo por el siguiente:

<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>

4.- Opcional. Si tu ya tienes las etiquetas en tu plantilla buscar el siguiente codigo:

<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>

5.- Y reemplazarlo por este:

<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>

6.- Ahora en elementos de la pagina, añade un widget y luego un HTML/Javascript y pega el siguiente codigo:

<br/><div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Cargando...</div><br/><div id="search-result" style="display:none"><a name="sres"></a><br/><div class="search-close" onclick="javascript:Element.hide('search-result')"><br/><script type="text/javascript">document.write(closeLabel);</script></div><br/><div id="show-result"></div><br/><div class="search-close" onclick="javascript:Element.hide('search-result')"><br/><script type="text/javascript">document.write(closeLabel);</script></div></div>

Y listo disfrutenlas :) .