4/09/2014

Widget de pestañas TAB en jQuery


¿Alguna vez viste esos blogs que tiene un área de widget con pestañas en la barra lateral que consiste en  perfil, popular, reciente y cuenta con puestos dentro de un solo clic ? Se conoce más comúnmente como widget de pestañas en jQuery , que le permite guardar una gran cantidad de espacio en la barra lateral manteniendo  una interfaz amigable para sus usuarios mediante la combinación de 3 diferentes widgets en uno solo. 
En este artículo, vamos a mostrar cómo añadir un Sidebar Widget jQuery con pestañas en Blogger.
¿Qué es un Widget con pestañas jQuery ?Habrás visto un montón de sitios web que tienen un widget con pestañas en la parte superior de su barra lateral donde mantiene tres cajas en un solo lugar y que te proporciona la posibilidad de seleccionar uno entre ellos. 
No sólo le permite ahorrar un poco de espacio en la barra lateral , sino que también mantiene tu blog con un diseño limpio y profesional.
Una gran cantidad de los sitios web más populares llamados grandes, están utilizando la misma técnica para mostrar más widgets en menos espacio.

La primer cosa que hay que hacer es ir a Blogger Template >> >> Editar HTML y pegar el siguiente código CSS justo encima de la etiqueta ] ]> < / b: skin > . Si tienes un archivo de hoja de estilo CSS separada , entonces también puede añadir el siguiente CSS a la misma.
 


Ahora este paso depende enteramente de la codificación de la plantilla de blogger pues diferentes diseñadores tienen diferentes formas de codificar, pero lo más común que encontraremos en las plantillas nos indica lo siguiente. Hay que mirar en la parte superior del código de su área de widgets  Sidebar . Debería encontrar ésta línea o una similar que cumple su función <div id='sidebar-wrapper'>, justo debajo de ella hay que pegar el siguiente fragmento de código.



Una vez realizados los dos pasos, guardar la plantilla pulsando "Guardar plantilla" en la parte superior. Ahora si vas a la zona de diseño podés ver tres áreas de widgets justo por encima de la barra lateral. Allí podés añadir widgets , preferentemente los que más espacio ocupan, como ser "Entradas populares" o "Etiquetas". La primer lengueta se reserva para un widget que ocupe poco espacio, como puede ser el Perfil sin datos (solo la foto) . 
 
Suerte.

Tomado de 
http://www.mybloggerlab.com/2014/04/how-to-add-jquery-tabbed-sidbar-widget-in-blogger.html


1 comentario:

  1. Muy bueno men :D pero quisiera saber si tienes uno para HTML

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.