Cómo colocar varios widgets de Blogger con pestañas

Les vamos a mostrar 2 maneras de colocar varios widgets juntos, pero separados por pestañas, lo cual nos ayudará a reducir y aprovechar mejor el espacio del blog, para que sea más fácil de visualizar por los usuarios. En las imagenes anteriores podrán ver dos ejemplos (El de la derecha es el que se utiliza en este mismo blog).

Primer método:

Primero vamos con el más fácil (imagen de la izquierda), y es más fácil porque no es necesario modificar la plantilla de nuestro blog. Para ello, una vez en Blogger, nos vamos a diseño -> Agregar widget -> HTML/Javascript, y escribimos el siguiente código:

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 });
});
</script>

<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

El título se deja en blanco, y el widget lo vas colocar (en la sección diseño), justo arriba de los widget que quieres colocar en pestañas, tal como lo muestra la siguiente imagen.

Lo señalado en rojo, indica el número de widget a colocar dentro de pestañas. Si en lugar de 3, sólo quisieras colocar dos widgets en pestañas, pues sólo cambia el valor 3 por un 2, quedando así: "tabCount : 2". Los colores del widget también se pueden modificar. Lo resaltado en amarillo indica que se está cargando una librería JQuery, que por lo general es necesaria para los efectos de deslizamientos, desvanecimiento o similares, así que si ya tienes algo así es mejor borrar esa línea. Para que las pestañas funcionen correctamente, los widgets a colocar en pestañas deben tener un título. También es necesario probarlo con todos los navegadores, en especie IE, ya que suele dar error. Si ese es tu caso, entonces este gadget no es para ti.

Segundo método:

Ahora el otro método para colocar tus widgets en pestañas, un poco más complicado con mejores efectos, lo hacemos de este modo: Dentro de Blogger, nos vamos a plantilla -> Editar HTML. Y sin expandir los artilugios, vamos a buscar: "]]></b:skin>". Y justo antes de eso vamos a colocar este código:

.widgets{width:100%; overflow:hidden; margin-top:5px; padding:0px 0px 0px 0px; background:#FFF; border:1px solid #ccc}
.widgets a{color:#222; text-decoration:none}
.widgets a:hover{color:#009; text-decoration:underline}
ul.tabnav{padding:0px 0px 0px 0px; height:27px; margin:0px 0px}
.tabnav li{display:inline; list-style:none; float:left; text-align:center; margin-right:4px}
.tabnav li a{text-decoration:none; text-transform:uppercase; font-weight:normal; padding:5px 8px; width:90px; line-height:18px; font-weight:bold; font-family:Century gothic,Arial,sans-serif; color:#262B2F; text-decoration:none; display:block}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a{text-decoration:none; background:url(none/catm.pg) repeat-x; color:#0283C7}
.tabdiv{margin-top:2px; padding:5px 5px 5px 5px; font-family: Tahoma,Georgia,Century gothic,Arial,sans-serif; background:#EBF3FB}
.tabdiv a:link, .tabdiv a:visited{color:#333}
.tabdiv a:hover{color:#2676A1}
.tabdiv ul{list-style-type:none; margin:0px 0px; padding:0px 0px}
.tabdiv ul li{height:100%; line-height:28px; padding:0px 0px 0px 0px; color:#333; border-bottom:1px dotted #61696F}
.tabdiv li a:link, .tabdiv li a:visited{margin-left:5px; overflow:hidden; height:18px; line-height:24px; padding:0px 0 0px 0px; margin:3px 0px; color:#99A6AF; font-size:13px}
.tabdiv li a:hover{background:url(none/la.jpg) no-repeat; color:#fff; text-decoration:none}
.ui-tabs-hide{display:none}
.tagcloud{width:300px; float:left; height:100%; padding:5px 15px; margin:0px 0px; background:#fff url(YOUR-IMAGE-HOSTING-LOCATION-HERE/tbody.jpg) repeat-y; font-family:Tahoma,Century gothic,verdana,Arial, sans-serif}
.tagcloud a:link, .tagcloud a:visited{color:#0282D9}
.tagcloud a:hover{color:#BC0C0F}

NOTA: Se puede ajustar el tamaño y color del código según el gusto.

Ahora buscamos la etiqueda "</head>", y justo antes insertamos el siguiente código:

<script src='http://yourjavascript.com/4393201331/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3433123309/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1303932443/sprinkle.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3931349203/hoverintent.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3335347091/scroll.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9438113033/spy.js'/>

Ahora vamos a buscar este otro código:

<div id='sidebar-wrapper'>

Y justo después insertamos este código:

<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='pop'><a href='#popular'> Recent</a></li>
<li class='fea'><a href='#tags'> Labels </a></li>
<li class='rec'><a href=' #recent'> Followers </a></li>
</ul>
<div class='tabdiv' id='popular'>
<b:section class='cahaya13' id='cahaya16' showaddelement='yes'>
<b:widget id='HTML144' locked='false' title='Recent Post' type='HTML'/></b:section>
</div>
<div class='tabdiv' id='tags'>
<b:section class='cahaya4' id='cahaya4' showaddelement='yes'>
<b:widget id='Label122' locked='false' title='Labels' type='Label'/></b:section>
</div>
<div class='tabdiv' id='recent'>
<b:section class='cahaya13' id='cahaya14' showaddelement='yes'>
<b:widget id='Followers152' locked='false' title='Followers' type='Followers'/></b:section>
</div>
</div>

Lo que está en rojo se puede sustituir por el nombre de tus pestañas. Para agregar tus propios widgets a las pestañas sólo tienes que cambiar lo que está en azul por el código de tu widget (Dichos códigos los puedes encontrar en la propia plantilla, ya que tienen que estar agregados a la plantilla previamente, y que están construidos de modo similar a los que están en azul).

Plantilla de Noticias