Títulos de la sidebar personalizados IV: expandir y contraer gadgets


Anteriormente vimos tres formas de personalizar los títulos de la sidebar:

» Con colores, fuentes y bordes (ver entrada)
» Con imágenes e íconos (ver entrada)
» Gadgets con distintos fondos (ver entrada)

Hoy vamos a ver una cuarta forma, y más adelante quizás encontremos otra forma más para agregar.
La forma que veremos hoy es para expandir y contraer cualquier gadget , con efecto deslizante. Para algunos casos especiales, mirad las siguiente entradas, aunque la presente entrada es igualmente válida:

» Expandir/contraer gadget de Etiquetas (ver entrada)
» Expandir/contraer gadget de Archivos (ver entrada)

Ahora, empecemos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Buscaremos el nombre que le dimos al gadget al que vamos a agregar el efecto de expandir y contraer.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Blogroll,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:


<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ENLACES&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ENLACES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Damos click a guardar.

15 opinaron:

Francisco

Jesi te comento aca que está mas a mano, quedó espectacular la plantilla, muchisimas gracias, ahora me voy a meter en cod html a ver que fue lo que modificaste!! Espero darme cuenta y poder hacer las demás...

Una vez mas muchisimas gracias Idola!!
Beso desde mendoza

Responder
G

Me gustó como quedó en mi blog de música :)

Besos

Responder
squirrel

Vaya, hay muchas formas de personalizar los títulos de nuestra sidebar que no sé cuál escoger, todas se ven muy bonitas; creo que probaré todas en un blog de pruebas y luego a escoger :)

Responder
Graciela

Lo tengo implementado Jési y me encanta como queda...besitos :D

Responder
Jéssica YK

» Francisco:
Me alegra que la ayuda te haya sido útil; si tienes más problemas con la plantilla, estoy para ayudarte.

» G:
Puedes dejar la URL y así podré visitar tu blog de música :)

» squirrel:
Escoge la que más te guste!

» Graciela:
Sí, lo he visto tu blog y se ve genial :)

S@lu2

Responder
Francisco

Por ahora no tengo ningun problema, va quedando como pretendia! Gracias de nuevo

Responder
Matias Lorencex

Hola jesi soy nuevo en esto de ser blogger y me encantaria saber si me puedes ayudar a duplicar mis banner de 125x125.Espero tu respuesta con grandes ancias.

http://www.descargoafull.blogspot.com

Saludos!!!

Responder
Jéssica YK

»Francisco:
Me alegra que todo vaya viento en popa :)

» Matias Lorencex:
No entiendo muy bien tu pregunta, ¿deseas agrandar los banners a 250 x 250? ¿o deseas agrandar el espacio de la sidebar para los banners? Si me explicas mejor, podré ayudarte.

S@lu2

Responder
XDD008

Muchisimas gracias!! iba buscando esto y me sirvio de mucho!! :D :D

Responder
Jéssica YK

» XDD008:
Muchas gracias a ti, por la visita :)

S@lu2

Responder
Francisco Dorto

Jesi!!!! Tanto tiempo, probé esta entrada y costó pero salió!

Siempre de gran utilidad tu información..

Besos

Responder
Jéssica YK

» Francisco Dorto:
Bienvenido nuevamente al blog! Vi que tu blog quedó muy bien al aplicar lo explicado en este post.

S@lu2

Responder
VRedondoF

Pues nada que no soy capaz , me sale este mensaje de error "
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".

Podrias decirme que estoy haciendo mal ???

Responder
Ashkenaz

Como seria para extraer y contraer para el feedjit.

Fracias

Jéssica YK

» Ashkenaz:
Es igual. Si el código está en un gadget, lo q tienes que hacer es localizar el nombre que le pusiste al gadget en la plantilla y colocar el código que está en negrita del paso 4.§
Si necesitas más ayuda, no dudes en avisarme :)

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio