Crear una seccion con pestañas para agregar cualquier gadget

Una forma prática de presentar los gadgtes mas importantes para los visitantes de tu blog, puedes modificarlo segun tus necesidades. 

Instrucciones paso a paso:

Paso 1: Vamos a Diseño ►Edición de HTML de la plantilla y agregamos lo siguiente en la sección del head de la plantilla es decir en cualquier lugar antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

 $(".tab_content").hide();

 $("ul.tabs li:first").addClass("active").show();

 $(".tab_content:first").show();

 $("ul.tabs li").click(function() {

  $("ul.tabs li").removeClass("active");

  $(this).addClass("active");

  $(".tab_content").hide();

  var activeTab = $(this).find("a").attr("href");

  $(activeTab).fadeIn();

  return false;

 });

});

//]]>

</script>

 Nota: Si ya usas jQuery, lo que está resaltado de azul, no lo agregues.


Paso 2: Luego, después de ]]></b:skin> agregamos el código CSS, para lograr la apariencia que buscamos en la sección con pestañas...




<style type='text/css'>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--altura de las pestañas--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px; /*--Alineación vertical del texto--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
color:#000;
text-decoration: none;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--le da a la pestaña 1px de borde blanco por dentro--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #fff;
border-bottom: 1px solid #fff; }
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
}
</style>

Paso 3: Finalmente lo que resta es agregar el código que hará aparecer la sección con las pestañas, y lo colocaremos en el lugar que queramos:

<ul class='tabs'>
    <li><a href='#tab1'>Etiquetas</a></li>
    <li><a href='#tab2'>Archivos</a></li>
    <li><a href='#tab3'>Unete</a></li>
</ul>
    <div class='tab_container'>
   <b:section class='tab_content' id='tab1' maxwidgets='1' showaddelement='yes'/>                                        
    <b:section class='tab_content' id='tab2' maxwidgets='1' showaddelement='yes'/>
       <b:section class='tab_content' id='tab3' maxwidgets='1' showaddelement='yes'/>
</div>
<div style='height:10px;clear:both;'/>


 Nota: Puedes modificar el nombre de las pestañas a tu gusto.


Para todas las plantilla del diseñador de plantillas, buscarás esta linea de código, y lo agregas después de éste:

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

...y se mostrará como primer elemento de la columna lateral.

Paso 4: Checa en vista previa y si todo luce bien Guarda los cambios.

Finalmente, Ve a Diseño de página y agrega los gadgets que quieras en las nuevas secciones que agregamos

Créditos: Compartidísimo