martes, 22 de abril de 2008

Lytebox, crea efectos muy buenos

Este tipo de hacks son los que mas me gustan, los que hacen que tu blog cobre un aspecto de página web con unos efectos, que si bien osn faciles de aplicar, hacen ver muy bien tu blog.

Se trata de lytebox, un JS el cual permite mostrar diversidad de archivos en una ventana nueva, pero no del navegador, sino en tu mismo blog.

Para poder usarlo en nuestro blog tendremos primero que poner los archivos en el codigo de nuestra plantilla, asi que vamos a Plantilla - - - > y justo antes de </head> colocamos este codigo:

<script type="text/javascript" src="http://correo.yaju.googlepages.com/lytebox.js"></script>
<link rel="stylesheet" href="http://correo.yaju.googlepages.com/lytebox.css" type="text/css" />

Una vez colocado el codigo, guardamos la plantilla y estará listo para usarse; para poder aplicar el efecto tendremos que colocar este codigo cada ves que querramos usarlo:

<a href="aqui la url de la imagen" rel="lytebox" title="aqui un texto junto a la imagen">aqui un enlace o thumbnail</a>

No olvides cambiar el texto junto a la imagen, si bien no quieres ningun texto solo lo dejas en blanco.

Tambien podremos usarlo para abrir una página web o un archivo:

<a href="URL_pagina" rel="lyteframe" rev="width:anchopx; height:altopx; scrolling:no;">
aqui un enalce o thumbnail
</a>

NO olviden cmabiar los valores de los pixeles ancho y alto

Ahora un par de ejemplos:
Imagen:

click para ver una imagen

Pagina en html:

Click para ver sitio en html


Bueno eso es todo, algun problema comenten.


Escucha este escrito

domingo, 20 de abril de 2008

Expander y contraer (otra forma)

De vuelta a los hacks.

Este hack es muy fácil de implementar en nuestro blog y lo mejor de todo es que nunca fallará ya que no requiere ningun archivo, todo es mediante JS.

Lo primero que tendremos que hacer es ir a nuestra plantilla y añadir justo antes de </head> el siguiente codigo:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Como verán no contiene ningun archiv así que nunca habra problemas con el ancho de banda ni nada por el estilo.

Despues de eso nos iremos a la parte donde queramos poner este efecto y agregaremos este codigo cada ves que lo queramos implementar en cualquier parte del blog:

<a onclick="return verocultar(this);"href="javascript:void(0);">aqui un enlace o una imagen</a><div style="display: none;">
aqui lo que quieres ocultar
</div>

Asi de fácil es tener este hack en nuestro blog, el único problema que encuentro es que al parecer no funciona si tenemos implementados otros javascripts en nuestra plantilla. Culquier cosa comenten este post :)


Escucha este escrito

Calendario de posts

Cargando...

 
ir arriba