Insertar widget MULTI-TAB (multipestañas) en tu blog

Uno de los widgets eficientes del espacio para los blogs, es por supuesto un widget de múltiples pestañas, que es casi una necesidad para cualquier blog. Puede usarlo para los puestos populares, los comentaristas superiores, los recientes, los mensajes recientes o cualquier flash que desee.  Por ejemplo la imagen muestra un multipestañas que hice para la pagina http://www.guatemalasismica.tk/


Aunque se pueden encontrar algunos otros métodos en Internet, pero todos tienen algo en común: son bastante confusos. Para ello les dejo este método, que es bastante fácil, pero por supuesto hay que ajustar la plantilla.


El proceso completo tiene principalmente dos pasos:

Paso 1:


Buscamos esto en nuestro codigo con la plantilla extendida

]]></b:skin>




Y pegamos este codigo:



// Copyright (C) 2005 Ilya S. Lyubinskiy.

// All rights reserved.

// Technical support: http://www.php-development.ru/



div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Width top main menu - Tab Buttons*/

text-align: center;

height: 24px; /* Height top main menu - Tab Buttons*/

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Top Main menu border color */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Top main menu font */

font-weight: 900;

color: #000; /* Top main menu font color */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #F4F4F4; /* Top main menu background color */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Content Border color */

overflow: hidden;

background-color: #FBF1A4; /* Content background color */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}


2. Descarga este archivos java aquí
DESCARGAR


3. Lo alojamos en cualquier servidor gratuito.


4. Buscamos con CTRL + F esta etiqueta:

</Head>


y justo antes pegamos esto:


<script src='http://mydatanest.com/......./tabview.js' type='text/javascript'/>

Salvamos la plantilla.


5. Nos vamos a Diseño y abrimos una caja HTLM y pegamos lo siguiente:


<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">

<div class="Pad">

Content 1.1 <br />

Content 1.2 <br />

Content 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Content 2.1 <br />

Content 2.2 <br />

Content 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Content 3.1 <br />

Content 3.2 <br />

Content 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script><span>widget by<a href="http://bloggerstop.net"> BloggerStop</a></span>

Y listo. Saludos





Pages