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.

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

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

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
♪♪ ミ☆мoмo-cнαи☆ミ ♪♪

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

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
cc.co2.vrf

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
Admin

Very good article post.Much thanks again. Cool.
gia xe o to
gia xe may
gia xe o to Honda
gia xe Chevrolet
gia xe Ford

Responder
Admin

Excellent post! Very impressive too...
We would like to invite you to watch this
Đĩa Bay
đĩa bay có thật
Vật thể bay không xác định
đĩa bay là gì
hình ảnh đĩa bay

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