Crear pestañas en Blogger sin modificar la 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.

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 a{float: left;display: block;width: 90px; height: 22px;
text-align: center; margin: 5px 0px 0px 3px; background-color: #ccc; /* color de fondo */padding-top: 2px; border: 1px solid #ffffff; /* color del borde */
border-bottom: 1px solid #ccc;font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */font-weight: 900;}
div.TabView div.Pages{clear: both;border: 1px solid #cccccc; overflow: hidden;
background-color: #fff;}
div.TabView div.Pages div.Page{height: 100%;padding: 5px;overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{padding: px 5px;}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 1</span></a>
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 2</span></a>
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 3</span></a>
</div>
<div class="Pages" style="height: 250px; width: 300px;">
<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 src="http://yourjavascript.com/34141325491/tab-viewmaskolis.js">
</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.

Fuente original: Amor Sevillista

Comparte:

Tweet