Caricaturas

Nostalgia

El Baúl de los Recuerdos

Rockola

Video Blog

You are here

Poner pestañas/tabs en Blogger



Las pestañas nos pueden ayudar a mostrar mucha información en poco espacio, por ejemplo en la sidebar, mostrando y ocultando los datos sólo pulsando en ellas. La instalación en Blogger no es díficil.

Estos son los pasos a seguir:

1. Bajamos el fichero zip. En él se encuentran varios ficheros de ejemplos y el javascript (tabber.js) que deberemos alojar en nuestro sitio de alojamiento de ficheros habitual. Para descargar el fichero pega esta dirección en una nueva pagina del explorador: https://sites.google.com/site/denimaguatemala/alojador/tabber.js

2. Antes de </head> añadimos el código del script:
<script type="text/javascript" src="tu_url/tabber.js"> </script>


tu_url es la dirección de tu alojamiento de ficheros.

3. Justo antes de ]]></b:skin> añadimos el css.


/*--------------------------------------------------

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;}


Guardamos los cambios.

4. En "Elementos de la página" agregamos un nuevo elemento HTML. En él añadimos el siguiente código:


<div class="tabber">



<div class="tabbertab" title="Pestaña1">

Contenido de la pestaña 1.

</div>



<div class="tabbertab" title="Pestaña2">

Contenido de la pestaña 2.

</div>



</div>

Guardamos.

El resultado será una primera pestaña con el texto "Contenido de la pestaña 1" y otra segunda con el texto "Contenido de la pestaña 2". En lugar de texto podemos incluir cualquier elemento (Perfil, últimos comentarios, últimas entradas, etc)

Podemos agregar tantas pestañas como necesitemos siempre que nos entren en el espacio que tengamos disponible, añadiendo este bloque las veces que sean necesarias:


<div class="tabbertab" title="PestañaX">

Contenido de la pestaña X.

</div>

Para adaptarlo al estilo de nuestro blog modificaremos la parte del css.

Visto en BarelyFitz Designs






Juan Pablo Mata

Especialista en Recuerdos y Música. Todo lo que te produzca Nostalgia aquí lo encuentras. En insta y twitter @juanpaguatemala

No hay comentarios:

Leave a Reply

Labels

60's 70's 80's 90's Abuso de PMT Administracion Moderna Alimentación Altavista Amigos Anime Anthony Cymerys Anucio Aplicaciones Apollo 11 Apollo 16 Apple Astronomía Audio Automatización Aviacion Ayuda Bill Cosby Biografia Blog Blogger Broma CANSAT Caricaturas Carlos Rivas Carlos Slim Charles Duke Chavorruca Chavorrucos Chicas Chile Chucherías Ciencia Cine Clase Coaching Compu Comunicación Correo CPM Cuestionarios Curioso Dante Denuncia Desagradable Descenso Dia del locutor Dialogo Diario Dieta Dieta de 1 Semana Dinero Dios es bello Diversión Don Gato y Su Pandilla Don Leo Economia Educación EEI Email Español Estacion Espacial Internacional Eventos Exito Facebook Farandula Feature Finanzas Forrest Gump Fotos Friends Gamegear Gasolinera Gasparin Generación 80's Generación 90's Gmail Google Google Labs Google Maps Grabación Guate Guatemala Hack Herramienta Herzio Historia Hotmail Html Idioma Infancia Informatica Insolito Interesante Internet Japon Java John Young Juan Pablo Mata Juegos Juguetes Las 100 mejores comidas rapidas del mundo Las Ardillas Listado Llavero Locutor Los Picapiedra Luna Mapacho Matrimonio McPatatas Medicina Memorias Mentoring Mercadotecnia Merk Meteorito Microsoft Mitos sobre las dietas Motivación Mozilla MTV Multimedia Mundo Muñecas Musica Música Nasa Navidad Nerds Nintendo Nivea Nombre Nostalgia Noticia Noticias Novedoso Obra de Teatro Opinión Ortografía Outlook Padres Pajaro Loco Panchito el Avioncito Papa Francisco Papas Fritas Pelicula Perfil Personal Peru Peso Piscologia Planeacion Estrategica Pleonasmo Podcast Power Point Prevención Progra Programas Promocion Prypiat Psicología Que significa tu nombre Radio Recuerdos Redes Sociales Reingenieria Remi Repollito Retro Revista Rolling Stones Ringtone Ruleteros Rusia Salud Sega Seguridad Seminario de Gerencia Seminario de Informatica Seminarios Series de Televisión Servicio al cliente Servicio Social Shows Significado Sismos Sistemas de Información Skyppe Social Solidaridad Sony Spotify Superación Teatro Tecnología Teléfono Televisión Teoria Gerencial Terapia Toma de Decisiones Tour Transporte Tristeza TV Twitter Uka Uka Universidad Universo URL Venganza de los Nerds Vida Video Videojuegos Viral Virus Walkman Wikipedia Ya Estamos Viernes Yahoo Yosi Sideral Yosinews You Tube Youtube Zapatos