18 noviembre, 2009

Como crear pestañas en Blogger : SimpleTabs

SimpleTabs es un script que permite crear pestañas o solapas sencillas sin recurrir a nada externo. Por lo regular son muy eficaces a la hora de tener una sola sidebar, pues ahí puedes poner lo de tres sidebar.Incluye un control de cookies, así que se recordará la última solapa abierta ,al recargar la página, se volverá a mostrar.
El único defecto es que en Internet Explorer no funciona bien.


Descargamos el ZIP y  tenemos 2 archivos:

 simpletabs_1.1.js y simpletabs.css

Debemos agregar ambos archivos antes del </head> de la siguiente manera:

<script type="text/javascript" src="URL_simpletabs_1.1.js"></script>
<link rel="stylesheet" type="text/css" href="URL_simpletabs.css"/>


o tambien podemos agregar el CSS directamente a la plantilla en dado caso que queramos modificarlo:




div.simpleTabs {

  padding: 10px;


}


ul.simpleTabsNavigation {


  height: 24px;


  line-height: 24px;


  list-style-type: none;


  margin: 0;


  padding: 0;


  text-align: left;


}


ul.simpleTabsNavigation li {


  background-image: none;


  display: inline;


  list-style-type: none;


  margin: 0;


  padding: 0;


}


ul.simpleTabsNavigation li a {


  background-color: #1E252D;


  border: 2px solid #3E454D;


  color: #BBBBBB;


  margin: 0 1px 0 0;


  padding: 6px 10px;


  text-decoration: none;


}


ul.simpleTabsNavigation li a:hover {


  background-color: #3E454D;


  text-decoration: none;


}


ul.simpleTabsNavigation li a.current {


  background-color: #3E454D;


  color: #FFFFFF;


}


ul.simpleTabsNavigation li a.current:hover {


  cursor: text;


}


div.simpleTabsContent {


  background-color: #3E454D;


  display: none;


  font-size: 12px;


  margin-top: 1px;


  padding: 10px;


}


div.simpleTabsContent.currentTab {


  display: block;


}




El HTML lo insertamos donde queremos mostrar las pestañas, recordando que si es en un post, deberemos escribir todo en una sola línea:



<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a></li>
</ul>
<div class="simpleTabsContent">contenido Pestaña 1 ... </div>
<div class="simpleTabsContent">contenido Pestaña 2 ... </div>
<div class="simpleTabsContent">contenido Pestaña 3 ... </div>
</div>
Comparte este post con tus amigos!

0 comentarios

Escribir un comentario ↓

Puedes dejar aqui tu mensaje, en el cual sabremos que te parecio esta entrada o tambien puedes dejar tus quejas, dudas o sugerencias.

Vivimos de tus comentario.

Puedes dejar un enlace hacia tu blog siempre y cuando este alojado en Blogger y no sea de Tematica no apta para menores de 18 años.