viernes, 3 de julio de 2009

EXPANDIR GADGET

Utilizar este recurso es una opción muy inteligente para ahorrar espacio en la sidebar de nuestra web o blog, consiste simplemente en mostrar el título de nuestro gadget y si el usuario está interesado en observar su contenido, lo podrá hacer haciendo click encima del título, seguidamente el título se despleglará mostrando su información.

Un ejemplo es el siguiente, esto es lo que se mostrará:


Al hacer click encima se desplegará mostrando la información de la siguiente forma:

Esto es un simple ejemplo, pero podemos utilizarlo para cualquier gadget.

Primer paso:(Copiar el script)

Iremos al código de nuestra plantilla y colocaremos el siguiente script justamente encima de </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");

google.load("scriptaculous", "1.8.2");
</script>
Segundo paso:(Buscar el gadget)

Para ello marcaremos la casilla de expandir artilugios en el caso de blogger y realizaremos la búsqueda por ejemplo con ctr+F y realizaremos la búsqueda por el nombre de nuestro gadget, tal y como aparece en nuestro panel de administrador, por ejemplo en el caso anterior mi gadget se llama ARCHIVOS.
Nos encontraremos con la línea de código tal como la siguiente:
<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
El nombre variará dependiendo del nombre de vuestro gadget.

Tercer paso:(Agregar código)

*Agregaremos la siguiente línea marcada de color azul de forma que quede así:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("RINCON","slide"); return false'>
La palabra marcada en color rojo hace referencia a un identificador, en el caso de que insertéis este recurso repetidas veces deberéis de cambiar este nombre por cualquier otro de forma que no aparezcan 2 gadgets con el mismo identificador.

Unas líneas mas abajo nos encontraremos con la siguiente línea:
<h2 class='title'><data:title/></h2>
</b:if>
*Agregaremos lo que indico en color azul, de forma que quede de la siguiente forma:

<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='RINCON' style='display: none;'>
Tener en cuenta lo dicho anteriormente del identificador, ya que aquí también tendremos que indicar su nombre correcto en el caso de insertar varios gadgets.

*De la misma forma que anteriormente continuamos hacia abajo en el código y añadimos la línea que indico en color azul.
</div>
<b:include name='quickedit'/>

20 Comentarios:

misaani dijo...

Hola Caxitos, me ha venido como anillo al dedo esta entrada que has publicado ya que tengo bastantes entradas ,y me funciona correctamante.
Pero tengo una duda, me gustaría no saliera el texto ARCHIVO , sinó mas bien un botón,
como esto,http://i44.tinypic.com/jkzr6o.jpg, pero no sé donde colocarlo en el código html.
Saludos

caxitos dijo...

misaani Entré a tu blog y la verdad que te está quedando muy chulo, bueno te comento que lo que me estás diciendo tengo pensado explicarlo en una entrada, como modificar la apariencia de los gadgets, siento no poder explicartelo ahora mismo, voy algo liado, prometo no tardar en explicarlo ;) Un saludo y disculpame.

PAGINA VENANCIO dijo...

Soy novato en esto, me gustaría que el ancho de las entradas en mi blog fuera el doble de lo que es ocupando toda la margen izquierda de la pantalla, ¿Se puede hacer?

caxitos dijo...

PAGINA VENACIO Si que se puede, tocando el código de tu blog, si eres principiante que parece ser que si te aconsejaría que cambies de plantilla antes que tocar código. Puedes consultar como hacerlo y si ves que no te aclaras ponte en contacto conmigo y yo te lo modifico o te explico paso a paso como hacerlo.Un saludo!

BdlE dijo...

hola, uso un gadget "listado de enlaces" para incluir noticias día tras día. Seguí tus instrucciones para expandirlo y salió perfecto.
Lo que me gustaría es darle la apariencia del gadget "Archivos del blog", esto es ordenar las noticias que voy juntando igual que las entradas del blog, o sea por mes y por día, y que al desplegarlo me aparezcan las noticias ordenadas cronológicamente.
Gracias, mi blog es delaescuelazn.blogspot.com

caxitos dijo...

BdlE El gadget que me comentas es uno que lo tiene como predeterminado blogger. Puedes agregarlo en Diseño->Agregar nuevo gadget, aquí en la pestaña de los básicos tienes uno que se llama archivo del blog agregalo y listo :) pruebalo y me dices si es lo qu estabas buscando.

BdlE dijo...

Gracias por tu respuesta.
No, no es eso, ya que "Archivo de blog" remite a las entradas. Lo que yo tengo en la sidebar es un gadget agregado, un "listado de enlaces" al que quiero darle la apariencia de "Archivo del blog". Intenté agregar un nuevo gadget de "Archivo de blog" pero no se puede. Saludos.

caxitos dijo...

BdlE A ver si te entiendo lo que quieres es que al darle a una pestaña se desplieguen todas la categorías que tiens en la parte derecha no es cierto?Dime si es eso lo que estás buscando y también me gustaría saber si añades etiquetas a los post, por lo que pude ver creo que no..Disculpa que no te entendiera a la primera, contestame y a ver si nos ponemos de acuerdo y lo solucionamos pronto!:)

BdlE dijo...

Todas las pestañas de mi blog se despliegan, tal como lo demostraste muy bien con "expandir gadget". Hay una en la cual recopilo noticias de periódicos y quisiera darle el mismo aspecto que tiene "Archivo del blog" para con las entradas. Si miras en mi blog verás una que dice "noticias del mundo trabajador", a esa me refiero específicamente: que las noticias aparezcan por mes, igualito a "archivos del blog". Gracias por tu atención!

Luciana dijo...

que se puede, tocando el código de tu blog, si eres principiante que parece ser que si te aconsejaría que cambies de plantilla antes que tocar código. Puedes consultar como hacerlo y si ves que no te aclaras ponte en contacto conmigo y yo te lo modifico o te explico paso a paso como hacerlo.Un saludo!

copie el comentario por q tmb qiero eso xD

Sumer dijo...

Caxitos, mi plantilla es diferente :(
Luego te la mando por correo a ver que tal. Un beso.

caxitos dijo...

Sumer Para encontrar el código debes de marcar la casilla Expandir los artilugios, logicamente si no la marcas no veras la totalidad del código.

cocke69 dijo...

Hola caxitos soy nuevo aqui y me parece muy bueno tu blog sigue asi.

Una pregunta: este codigo me sirvio a la perfeccion pero sabes como ponerle una flechita q este hacia arriba? xq cuando despliegas aparece solo hacia abajo y no se si se podria q apareciera otra hacia arriba..

D antemano t lo agradezco buen dia..!!

caxitos dijo...

cocke69 Buena pregunta! como poder se puede hacer por supuesto pero en este caso en concreto nos estamos aprovechando del siguiente script http://www.google.com/jsapi lo que nosotros hacemos es un link a ese script de forma que podamos utilizarlo, si quisieramos modificar el funcionamiento del mismo tendriamos que insertar el script en nuestra plantilla cosa que dados los pocos recursos que nos facilita blogger seria mas engorroso que otra cosa. En este caso unicamente seria modifical la imagen de la flecha por por 2 flechas pero claro.... tendriamos que adaptar totalmente el script. En esta plataforma que utilizamos debemos de ser muy cuidadosos ya que nuestros recursos son muy limitados!

cocke69 dijo...

Ola d nuevo caxitos si es umy cierto lo q dices pero en cuanto a las flechas es una cosa muy sencilla mira t explico:

&#?9660; (esto significa una flecha hacia abajo)

y esto:

&#?9650; (significa flecha hacia arriba)

En este caso donde dice:
>&#?9660;<

Ahi solo aumente el otro codigo y aparecieron las 2 flechitas

>&#?9660;&#?9650;<

(NOTA: Puse los signos de interrogacion xq de lo contario me apareceria esto: ▼▲ lo puse asi para visualizar el codigo no hay q olvidar quitar los signos de interrogacion)

pon el codigo de las flehas asi como esta buscalo en google y veras como aparecen las flechas...

era un detalle muy sencillo jaja vaya lio espero t haya servido mi observación.

Hasta la proxima me tendras aqui seguido

BUEN DIA..!!

caxitos dijo...

cocke69 Siiii es cierto tienes toda la razón hace mucho que publiqué esta entrada y no recordaba bien como funcionaba, di por supuesto que era una imagen que le llamaba desde el script.
Gracias por tu aportación.

Juan_JCH9 dijo...

Este truco supera al de todos.
Por fin he logrado una modificacion que ayudara mucho a mi blog "si Funciona"

Observen:
Programas y Trucos

Primera vez que entro a tu blog y me voy satisfecho.

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.