TabView con CSS & JQuery

sharysce

Bastante nice el efecto de tab's view que me topo en Nettuts chido a decir a ciencia cierta....muy util y versati que puedes utilizar en tu blog, y no esta nada dificil ya que la mayor parte lo hacen 3 archivos un 2 .jss y 1 .css, lo mas chido de todo es el efecto que da....los habia visto antes pero no con este efecto, esta muy sencillos y si tienes un blog y lo quiere aplicar, aqui te va la explicacion:



Claro voy a dar instruccione para Blogger..y recuerda que primero Descargar tu plantilla completa antes de proceder...respaldo ante todos, por si mete la pata!!

1.- Descargamos los arcivos: aqui

2.- Colocar los archivos en tu Head de HML: vamonos a Panel>Diseño>Edicion HML, aqui bien lo interesante, mucha gente esta acostumbrada a buscar head (inicio) y otra con solo /head (final) ... pero no importa solo basta que lo coloques entre estas limitantes..


<head>

<!-- ***** script para tabView_contender ***** -->

<link href='URL_enlace/tab_style.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='URL_enlace/tab_jquery-1.2.3.min.js'/>

<script src='URL_enlace/tab_funcion.js'/>

....

</head>


--Guardamos los cambios..

3.- Crear un elemento HTML: ya que guardamos los cambios en edicion Html, nos vamos a Panel>Diseño>Elementos de la Pagina, y damos añadir un elemento de pagina, en donde tu quieres mostrar el TabView, y colocamos el siguiente codigo...


<div id="tabbed_box_1" class="tabbed_box">

<div class="tabbed_area">

<ul class="tabs">

<!-- TITULOS DE LAS PESTAÑAS -->

<li><a style="cursor: pointer;" class="tab active" title="content_1">PRINCIPAL</a></li>

<li><a style="cursor: pointer;" class="tab" title="content_2">ARCHIVOS</a></li>

....

</ul>

<!-- CONTENIDO DE LA PESTAÑA1 "PRINCIPAL" -->

<div id="content_1" class="content">

<ul>

<li><a href="URL_enlace">INICIO<small> Texto Opcional.</small></a></li>

....

</ul>

</div>

<!-- CONTENIDO DE LA PESTAÑA2 "ARCHIVOS" -->

<div id="content_2" class="content">

<ul>

<li><a href="URL_enlace">IMAGE's<small> Texto Opcional</small></a></li>

...

</ul>

</div>

<!-- ASI SUCESIVAMENTE POR CADA

PESTAÑA DE TITULO QUE COLOCASTE .....-->



</div>

</div>

Y asi vas formando tu tabView, de tal manera que lo puedas personalizar a tu gusto y antojo LISTO!!!, puedes ver el ejemplo en la parte bajo del blog, suerte si tienes alguna duda no duden en contactarse conmigo...o quien gusten!! XD!!

No hagas Hotlinking cuando utilizas imágenes de otro servidor.

7 comments:

Antony (Vistos Buenos) dijo...

Hola! Pasando por ahí te encontre... Muy interesante tu blog... Y buscaba como hacer Tabview y lo consegui aquí... Saludos!

→ sharys'ce dijo...

que shido que te sirvio!!! si tienes mas dudas, dime que show....y te ayudo...un saludo

Antony dijo...

Hola! Bueno ya coloque Tabview en mi blog... El problema ahora es que se me cambio automáticamente el fondo de mi blog... Pasa por mi blog para que veas... Saludos!

sharysce dijo...

ahhh!! si tuve problemas con el servidor de alojamiento y se perdió esa información.

Pero ya lo puse recuperar y el enlace esta actualizado!! LISTO!!

Deibys dijo...

Hola, queria agradecer por el codigo, la verdad esta muy interesante y util, solo queria saber a la hora de personalizar los tabs como podria manejar el tamaño de los mismos, es decir el height y el width, solo de los tabs, el contenido de la pagina ya lo manejo. Gracias de antemano.

Anónimo dijo...

hola:
podrias colgar una imagen del acabado
eske estuve probando tu ejemplo
pero no me salio y kiera ver como keda
desde ya gracias mi correo es sdarknot@gmail.com
para caulkier repuesta

¿Quieres dejar tu comentario?

CONTACT: Esta opción es para que puedas dejar tus comentario de: dudas, regaños, reclamos, felicitaciones, etc...

Creo en la libertad de expresión, asi que no modero los comentarios, por eso te pido que no hagas comentarios ofencivox...

Un saludo, sharys.

Gracias por tu comentario.


Comentar con el formulario antiguo.
Si surge algún problema al publicar un comentario, te sugiero que utilice esta opción para abrir los comentarios en una ventana modal en esta misma pagina.

... Si no te convence, puedes comentar con el formulario normal.

img_emoticon.gif

 
© Sharys'ce Web 2005-∞ | Plantilla Blogger Minima Black | Diseño de Sharys'CE | Hecho en xico | Free Web Hosting