23 diciembre 2012

Pestañas en Blogger sin modificar plantilla


Hoy os voy a mostrar una forma sencilla de colocar un gadget de pestañas en el blog sin tener que tocar o modificar el Html de nuestra plantilla.
pestañas en blogger

Resulta de mucha utilidad pues nos ayudará a REDUCIR espacio en la barra lateral. Dentro de ellas podemos colocar cualquier código que deseemos.

Pasos a seguir:
Diseño>añadir gadget (elemento de página)>html-javascript

Incluye esto en su interior:

<style type="text/css">
div.TabView div.Tabs{height: 24px;overflow: hidden;}
div.TabView div.Tabs a{float: left;display: block;width: 98px;
text-align: center;height: 24px; padding-top: 3px;
vertical-align: middle;border: 1px solid #000;border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; font-weight: 900;color: #000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #ddd; }
div.TabView div.Pages{clear: both;border: 1px solid #6E6E6E;
overflow: hidden;background-color: #fff; }
div.TabView div.Pages div.Page{height: 100%;padding: 0px;
overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">

<a >Nombre 1</a>
<a >Nombre 2</a>
<a >Nombre 3</a>
</div>
<div style="width: 300px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Código a mostrar 1
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 2
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 3
</div>
</div>
<script>function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div></div></form>

Modificaciones:
1.-Escritura roja es el color del título de cada Pestaña
2.-Número 300 en el 'Ancho' es la longitud de la caja y 250 es la 'altura'. Cambiar por el valor del tamaño de su sidebar.
3.-El texto en negrita es el contenido a mostrar. Sustituir con códigos, links, banners o el gadget que desees.



Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

38 comentarios

¡Gracias! Me ha venido fenomenal la info.

Hola,no se cual es el texto en negrita.. ayuda por favor..

Nelly, en lo que está en negrita se coloca cualquier código de un gadget, por ejemplo el gadget de lo más comentado.

Elimina " código a mostrar 1" y coloca en su lugar el código de " lo más comentado".

Espero que lo hayas comprendido.

Muchas gracias por el truco pero tengo una duda. ¿Se pueden poner 2? Es que es lo que he puesto en mi blog (http://www.worldlewis.com/) pero solo me funciona 1... Si modifico el que no funciona deja de hacerlo el otro... :S

Saludos! Estaré atento a la respuesta.

Lewis, solo funciona uno, si instalas dos, interfieren los códigos y siempre anula uno.

Saludos.

Gracias, es fácil de usar y muy útil :D

Gracias... Pero si se quiere añadir un widget creado por blogger con el de Entradas Populares... ¿Cómo se inserta?

Vagabundo, puedes colocar los post de una etiqueta en particular, Mira esto

muchas gracias Amor Sevillista me vino bien para lo que queria hacer, te referenciare en el blog donde pongo mis herramientas etc ya iras viendo, saludicos soy del Sevilla de corazon por mi aguelica, y madridista por nacimiento jajaja saludos coetáneo

llo es que soi del betis, lo siento

hola esta genial el post de verdad que eso era lo que deseaba el detalle es que yo quiero poner en uno de ellos las paginas que más visito que son como 20 y ocupan mucho espacio asi que no se como poner eso en este tutorial me ayudarías por favor?

Saranghae-yo YoSaranghae,puedes colocar los blog de esta forma: <ul>
<li><a href=#>Nombre del blog 1</a></li>
<li><a href=#>Nombre del blog 2</a></li>
</ul>

Donde # es la dirección Url del blog.

Saludos.

pero aparecerá lo que actualizaron ultimen te esas paginas? v.v

No, para las actualizaciones de los blog hay un gadget específico.

he notado q solo sirve para google chrome ya q en mozilla y en otros no funciona ya que sale una pantalla en blanco que dice ---about:blank

Juan Carlos, yo lo uso en este blog y no tengo problemas con Mozilla, puedes observarlo en mi sidebar.

Una pregunta: Y si quiero que cuando la pestaña esté activa tenga un fondo de otro color como puedo hacer?
Saludos!

Juan para ello deberías ordenar los 3 <div class="Pad"> que hay en el código numerando cada uno de ellos con 1,2 y 3. Ejemplo:(<div class="Pad1">)
Después debes colocar el CSS de esas tres clases bajo <style type="text/css">

Este sería un ejemplo solo con el fondo:
.Pad1{colour:000;background-color:#dffrtt}
.Pad2{background-color:#fff}
.Pad3 {background-color:#FAE1E1}

Hola

Me sirvio mucho, muchas gracias. Pero si quiero que solo me muestre dos pestañas, como hago para que se ajusten los botones al tamaño del widget?

Creo que el se refiere es a cuando la pagina de la pestaña este activa el fondo de esa pestaña sea diferente. Como el de este blog http://himitsuyaoi.blogspot.com/

Cambia el width: 90px; por 145px
Elimina este trozo de código: <a><span style="color: #000">Nombre 3</span></a> y este otro para solo dejar 2 pestañas: <div class="Page">
<div class="Pad">
Código a mostrar 3
</div>
</div>
con ello ya solo tienes 2 pestañas y los botones ajustados.

Juan Pedro he modificado el código para que las pestañas queden activas.
Copialo de nuevo y me comentas.

Gracias, y perdón por no haber respondido, solo me había olvidado ya que lo había logrado descifrar yo. Pero mejor para aquellos que hallan tenido el mismo problema que yo.
Saludos.

Funciona perfectamente, es mejor de esa manera para poder saber en que pestaña estas actualmente :D

gracias! esto lo esta buscando sin tocar la plantilla, me gustaría poner una imagen en lugar de los textos de las pestañas, viene de awesome font así que ya esta llamando los iconos, pero aunque ya agregue el código, no me funciona, me ayudas?

olvida mi comentario anterior, ya lo logre!

no, mentiras, no lo logre, había logrado las imágenes pero no me dan link, ayudameeeeeee. Mi perfil esta habilitado para que veas el blog. gracias!

Rana Rosa el perfíl m da como no habilitado, de todas formas déjame mejor url de u blog y lo miro.

De todas formas cambia Nombre 1 por el icono de awesome, ejemplo: <i class='fa fa-facebook'></i>

Muchas gracias amigo, logré colocarlo en mi blog. Pero me gustaría saber cómo hacer para que cada enlace ocupe una línea, como lo tienes en tu Tabview. Saludos

Juan C. Reyes, no lo veo instalado en tu blog, así no puedo explicarte como conseguirlo.

y si quiero mas de 3 pestañas? que cambios se deben hacer quiero que se puedan ver hasta 6 pestañas agregue mas

OPCION 1
OPCION 2
OPCION 3
OPCION 4
OPCION 5
OPCION 6


pero solo muestra 3

Coloca esto en el html en lugar del otro.


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 600px;" class="Tabs">

<a >Nombre 1</a>
<a >Nombre 2</a>
<a >Nombre 3</a>
<a >Nombre 4</a>
<a >Nombre 5</a>
<a >Nombre 6</a>
</div>
<div style="width: 600px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Código a mostrar 1
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 2
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 3
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 4
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 5
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 6
</div>
</div>
<script>function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div></div></form>


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"