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.
Soy Sharys, la idea de tener un blog, no me llamaba mucho la atención, pero me dije - vamos a intentarlo haber que sale -, mi primera opción, fue personal, pero la verdad no me interesa mucho hablar de mi así que opte por publicar un poco de todo.
6 comentarios:
Hola! Pasando por ahí te encontre... Muy interesante tu blog... Y buscaba como hacer Tabview y lo consegui aquí... Saludos!
que shido que te sirvio!!! si tienes mas dudas, dime que show....y te ayudo...un saludo
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!
El enlace esta roto
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!!
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.
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 no te convence, puedes comentar con el formulario normal.