AGREGAR PESTAÑAS AL BLOG

En este artículo vamos a aprender como insertar pestañas en el blog para poder separar la información contenida en nuestro blog por categorías.
* En primer lugar hay que descargar un archivo de JavaScript al que señalaremos desde el blog y que creará la apariencia de las pestañas. Este archivo lo podemos descargar de aquí; pinchando en Download y descargando el archivo "tabber.js".
* Una vez descargado debemos subirlo a la red y para ello utilizaremos cualquier página que ofrezca alojamiento gratuito; como por ejemplo Lycos. Una vez creada la cuenta tan sólo hay que subir el archivo a su directorio y para ello pincharemos en "webftp" (el primer enlace de la columna de la izquierda) y después en "abrir FTP web"; cuando se abrá tan sólo hay que examinar y subir.
* Ahora volvemos a Blogger y vamos a Diseño -> Edición de HTML. En esta sección vamos a agregar el código necesario para llamar al JavaScript y que nos cree las pestañas.
De entre todo el cógigo buscaremos donde pone ]]></b:skin>
y justo tras esa etiqueta pegaremos el siguiente código:
<script type="text/javascript" src="http://www.tusitio.com/tabber.js"> </script>

Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, en el caso de lycos seria algo así como: http://usuarios.lycos.es/"el nombre que hayas puesto"/tabber.js
* En esa misma sección pero justo antes de ]]></b:skin>
pegaremos el siguiente código:
/*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/.tabberlive .tabbertabhide { display:none;}/*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/.tabber {}.tabberlive { margin-top:1em;}/*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}ul.tabbernav li { list-style: none; margin: 0; display: inline;}ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}ul.tabbernav li a:link { color: #448; }ul.tabbernav li a:visited { color: #667; }ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;}ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff;}ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;}/*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/.tabberlive .tabbertab { padding:5px; border:1px solid #aaa; border-top:0; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ /* height:200px; */ /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ /* overflow:auto; */}/* If desired, hide the heading since a heading is provided by the tab */.tabberlive .tabbertab h2 { display:none;}.tabberlive .tabbertab h3 { display:none;}/* Example of using an ID to set different styles for the tabs on the page */.tabberlive#tab1 {}.tabberlive#tab2 {}.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}.tabberlive .tabbertab li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}
Y tras ésto guardaremos los cambios realizados.
* Ahora acudimos a elementos de página y añadiremos un nuevo gadget: "añadir HTML/ JavaScript" y dentro agregamos el siguiente código:
<div class="tabber"> <div class="tabbertab"> <h3>Sección 1</h3> Contenido de la sección 1. </div> <div class="tabbertab" title="Título"> Contenido de la sección 2. </div></div>
Ahora tenemos dos pestañas listas. Para cambiar el nombre de la primera cambiaremos donde pone Sección 1 el de la segunda donde pone Titulo. Donde pone contenido de la sección 1 o 2 colocaremos el contenido que queramos introducir en la pestaña, para introducir texto simplemente escribiremos lo que deseemos sin embargo hay que usar lenguaje html para introducir cualquier otro elemento. Por ejemplo para introducir dentro de una pestaña otra página web debemos utilizar el siguiente script:
<iframe scrolling="yes" width="100%" frameborder="10" src="http://dirección de la página" name="window" height="600" marginwidth="0"><br /></iframe>
Y si queremos introducir más pestañas, debemos introducir el siguiente código justo antes del ultimo "/div":
<div class="tabbertab"> <h3>Título de la Pestaña</h3> Contenido HTML de la sección </div>
* Nuestras pestañas están listas ya, sólo que estarán situadas en la columna lateral tal y como cualquier otro gadget. Si deseamos cambiarlo a la parte de arriba tan sólo hemos de arrastrar el elemento hasta donde queramos que se situe.