Crear una sección con pestañas para agregar cualquier gadget
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:
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:
/* 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;
}
.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.
<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-->Nota: Si quieres que aparezca como primer elemento buscas:
<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-->
<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
Etiquetas:Editar plantilla,Gadget,jQuery,Tutoriales