Esta vez veremos como convertir los Gadgets de nuestro blog en desplegables gracias a la librería jQuery. Este truco puede ser muy útil para personas que tengan muchos en su página como es mi caso. El efecto de expandir y contraer se produce cuando pulsamos sobre su título. La única desventaja que tiene el script es que aunque oculte el contenido de los Gadgets, éstos siguen cargando.
Haz click en el enlace para ver una demostración del resultado final.
Lo primero será incluir en nuestro blog la librería jQuery. Si ya tienes la versión que vamos a utilizar u otra distinta, puedes omitir igualmente este paso.
Para ello nos dirigimos a la parte de Tema > Editar HTML de nuestra plantilla y abrimos el buscador del editor.
Lo siguiente que haremos será buscar la etiqueta
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
A continuación, para aplicarle el efecto a cualquier Gadget de la página tendremos que localizarlo con el buscador del Editor HTML de nuestra plantilla. Para encontrarlo antes puedes buscar la etiqueta
En el ejemplo de abajo se ha utilizado un Gadget tipo HTML/Javascript pero los demás tendrán una estructura muy similar.
Debes fijarte bien y añadir los siguientes códigos que aparecen coloreados.
El primer código en rojo corresponde a las flechas que añadiremos al título del Gadget y debe ir colocado de forma que deje encerrada la etiqueta<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
▽
<data:title/>
△
</span>
</h2></b:if><div class='widget-content'><div class='expandir1' style='display: none;'>
<data:content/></div>
<script>$(document).ready(function(){$('#expandirGadget1').click(function(){$('.expandir1').slideToggle("slow")})});</script>
</div><b:include name='quickedit'/></b:includable></b:widget>
Los valores
En este caso se han usado los códigos de las siguientes flechas ▽△ pero puedes utilizar cualquier otro carácter.
También puedes utilizar una imagen en vez de caracteres pero debes utilizar este otro código:
<img src='URL de la imagen' border='0' width='10px'/>
Aquí te dejo algunas páginas que muestran el código correspondiente de cada símbolo.
El segundo código en azul es el encargado de indicar qué parte del Gadget se desplegará al hacer click en su título. Debe ir colocado después de
El tercer código en verde es el responsable de que se ejecute el script jQuery para desplegar el Gadget. Debe de ir colocado después del código azul y con mucho cuidado de que esté antes del cierre de la etiqueta
El texto en color morado corresponde al ID y a su atributo
En el ejemplo aparecen los tres código con los espaciados pertinentes para que se entienda mejor.
Si seguiste bien las indicaciones, ya tendrías el script listo para utilizarlo a tu gusto y conveniencia en tu sitio web.
No hay comentarios:
Publicar un comentario