Crear una sección con pestañas para agregar cualquier gadget usando jQuery

Anteriormente, ya te había hablado como agregar una sección con pestañas para agregar ahí cualquier widget,  y hace unos días vi en net tus, una propuesta para crear secciones con pestañas que tiene un efecto deslizante. Me gustó para adaptarla a Blogger y poner ahí gadgets.

Esto permite mostrar contenido de una manera dinámica, sin ocupar mucho espacio, puedes verlo funcionando en el blog de demostración; ¿te gusta?, entonces veamos como ponerlo en tu blog.

Cómo hacerlo paso a paso (Nuevas Plantillas)

Paso 1: Primero agregas los estilos o CSS, y para ello, vas al Diseñador de Plantillas > Avanzado >Añadir CSS, (en la nueva interfaz, necesitas ir a Plantilla > Personalizar, para ingresar al Diseñador de Plantillas), y en el campo pegas lo siguiente:

/* Sección con pestañas*/
.boxy {
width: 100%;
margin: 15px 5px;
padding: 0;
background: #f3f1eb; /*el color de la seccion*/
border: 1px solid #dedbd1;
}
.boxy ul {
margin: 10px 2px 0 10px;     
padding: 0;
}
.boxy ul li {
margin: 0 0 10px 0;     
padding: 0;
border: none;
}
.boxy li a {
color: #123456;
text-align: left;
margin: 0;
padding: 0;
}
.boxy a:hover {
color: #009;
text-decoration: underline;
}
.tabnav li {
display: inline;
font-size: 12px;
}
.tabnav li a {
text-decoration: none;
text-transform: uppercase;
line-height: 180%;
color: #222;
font-weight: normal;
margin: 0;
padding: 4px;
outline: none;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1; /*color de la pestaña activa y hover*/
color: #222;
text-decoration: none;
}
.tabdiv {
margin: 0 10px 10px;
background: #FFF;
border: 1px solid #dedbd1; /*color de borde*/
padding: 4px 2px;
}
.tabdiv li {
list-style: none; 
margin: 0;
padding: 0;
}
.ui-tabs-hide {
display: none;
}
#col1, #col2, #col3 {
margin: 5px;
padding: 0;
font-size: 12px;
}

Si vas a usar gadget que tengan listas puedes agregar una imagen como viñeta en cada elemento de la lista, y para ello buscas:
           .tabdiv li {
            list-style: none; 
            ...
            }
...y cambias: list-style: none; por  list-style-image: url(mi_imagen.gif);.


Paso 2: Vas a a la edición de HTML de la plantilla y agregas jQuery y los scripts antes de </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='//sites.google.com/site/scriptskarla/archivos/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>

IMPORTANTE: 

• En el caso del archivo del segundo script que viene en la parte de morado, te recomiendo ampliamente que lo guardes en tu propio servidor.
• Si ya usas jQuery, no lo agregues, pero si podrías por ejemplo, actualizar la versión.

Paso 3:  Vas a la Edición de HTML de la plantilla, y con la ayuda de ctrl F buscas </aside> pensando en que lo vas a poner en la columna derecha de tu blog y como último elemento en la columna:

 <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>


Inmediatamente después agregas el HTML, y editas los títulos de cada pestaña,  que vienen marcados de rojo, y que deberán coincidir con cada gadget que pienses poner:

<!--sección con pestañas-->
<div class='boxy' id='tabvanilla'>
    <ul class='tabnav'>
    <li><a href='#pestana1'>Lo + nuevo</a></li>
    <li><a href='#pestana2'>Comentarios</a></li>
    <li><a href='#pestana3'>Lo + visto</a></li>
    </ul>                                                 <!--/pestana1--> 
    <div class='tabdiv' id='pestana1'>
    <b:section id='col1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
  <!--/pestana2-->
<div class='tabdiv' id='pestana2'>
    <b:section id='col2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
   <!--/pestana3-->
   <div class='tabdiv' id='pestana3'>
   <b:section id='col3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
    <!--featured-->
         </div><!--/sección con pestañas-->

Nota: Si quieres que aparezca como primer elemento buscas:

<div class='column-right-inner'>


Inmediatamente después de esa linea lo agregas, también lo puedes poner antes del cierre de la etiqueta </aside> y quedará dentro de la envoltura, no hay diferencia ya que queda dentro del mismo div.


*Para las plantillas anteriores o de Diseño, buscas la envoltura de la columna lateral:


  <div id='sidebar-wrapper'>


...y si quieres que quede como primer elemento, lo pones inmediatamente después de esa linea, sino, antes del cierre del div "</div>" de dicha envoltura de la columna lateral. Generalmente así viene identificada, debes estar segura (o).

Paso 4: Checas en vista previa y si todo luce bien, guarda los cambios.


Paso 5: Después vas a los elementos de la página o Plantilla en el nuevo Diseñador de Plantillas y agregas los gadgets respectivamente haciendo que coincidan con los títulos de cada pestaña y guarda los cambios.


Puedes personalizar los colores de fondo de las secciones y pestañas así como el color de fuentes etc.
Funciona en todos los navegadores incluyendo Internet Explorer 6.

*Actualizado Oct/31/11