Hacktime

Que seria de la web sin este blog

Etiquetas recargadas con ajax

Posted by yaju en marzo 5, 2007

Hemos vuelto, y mas recargado que nunca (que mentiroso), despues de unos dias fuera de esto, he vuelto, por consiguiente he dejado de responder algunos mails y comentarios, prometo responderlos lo mas pronto posible. Ahora pasemos al hack…

Como pueden ver en la barra lateral (sidebar) izquierda se encuentran las etiquetas, si damos click en alguna de ella, no recargara la pagina sino parte de ella, solamente las etiquetas, mostrando los ultimos en primer plano, y los demas seguidos por un link hacia los demas(tecnologia AJAX), este hack nos sirve para mejorar la interaccion del blog con el usuario, el post original lo podemos encontrar aqui.

1. Click en Plantilla–Edicion de HTML–Marcamos la casilla expandir la plantilla de artilugios
Buscamos el </head> y antes de este colocamos el codigo siguiente:

<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&#8217; 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&#8217; type=’text/javascript’/>

Si tu conoces de CSS puedes modificar el widget para que luzca bien.

2. Buscar esta 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>

Y reemplazar el codigo por este:

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

3. Opcional. Si tu ya tienes las etiquetas en tu plantilla:

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

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

4. Guarda tu plantilla.

5. Añade el siguiente Widget a tu blog

Guardamos el Widget. Disfrutenlo, espero os guste🙂

9 comentarios to “Etiquetas recargadas con ajax”

  1. Iveldie said

    Como el anterior truco que pusiste de las etiquetas este tampoco me funciona, lo he hecho exactamente como dices, paso por paso, se me añade el widget al blog pero no sale nada. Hay un monton de trucos en este blog que parecen muy interesantes pero que no puedo aplicar en mio porque, o dan error de plantilla o simplemente no funcionan. Una pena…

    Saludos

  2. Rafa Mata Milla said

    Pues no hace na

    visita: http://www.todoparablog.blogspot.com

  3. alexander said

    como puedo modificar el widget, En que part se encuentra para modificarlo????,

  4. Anonymous said

    muy weno el truco me resulto de una

    y muy weno tu blog tambien

    pero tengo una pregunta kmo puedo insertar los codigos de las etiquetas en un menu??

    osea tengo un menu en javascript que es muy parecido al tuyo pero con este truco no me funciona en el menu solo con las etiquetas

  5. Shaparro said

    Hola, que tal?

    Muy buen blog el tuyo eh?

    Ahora sigo yo de hacer una pregunta.

    Quiero saber como haces para que en vez del título del blog pongas una imagen

    Saludos y agradezco de antemano

  6. alex said

    hola nuevamente , me funciono muy bien este hack, pero kisiera saber si solo se puede con las etiquetas, en mi caso kisisera hacerlo con reproductor de musica que al hacerlo clic salga el reproductor de musica, y no tnega que modificar la pagina si no solo ese speacio del reproductorm spero me hayas entendido , mi correo es alex_maha16@hotmail.com

  7. ¤_ Alessi _¤ (I. Alexis Argüello Sandoval) said

    Te quedo muy agradecido Leonel por ayudarme a mejorar mi web. En serio mil gracias y adelante, pues gente que no sabe mucho sobre códigos puede realizar cosas sorprendentes gracias a tu ayuda. O al menos ese es mi caso.

    Lo malo es que este hack (ETIQUETAS RECARGADAS)y el de RASTROS DE MIGAJAS DE PAN no pude concluirlos con éxito. Te ruego amplies al respecto si se pudiese.

    En el primer caso, o el de este post me es imposible aplicarlo por la confusión que tengo con el:
    CDATA
    ¿lo debo continuar como está? ¿Por qué de las barras al estilo divisón?
    Luego me es imposible encontrar al menos en mi blog el código:
    b:loop values=’data:post.labels’ var=’label’
    para continuar con las instrucciones del hack.

    Te quedaría muy agradecido si podrías ayudarme (si es necesario te puedo enviar mi html)

    En el caso de las migajas de pan tb me es imposible encontrar el código:
    b:loop values=’data:posts’ var=’post’
    por lo que tampoco puedo continuar con las instrucciones.

    ¡¡HELP!! ME man por favor.
    Gracias mil y espero tu segura respuesta, pues veo que buena parte de los hacks que publicas los aplicas en tu blog.

  8. LinuxMfG said

    PREGUNTA

    Este truco funciona en conjunto con
    el truco de la “nube de etiquetas”?

    Lo he aplicado, pero no me aparece
    nada…

  9. ritxard said

    A veces falla incluso en tu blog. pone qu no puede leer la pagina sabes el motivo? gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: