Tutorial: Tabs para tu blog/web

kanikase · 12 May 2014

Hola amigos de ForoBeta, hago esta tutorial, bue ya todos imaginaran porque, y lo que les enseñare sera a poner una tabs de opciones en su blog/web, utilizaremos jQuery para hacerlas mas dinámicas, css y javascript, es algo muy sencillo de editar, por si las que dejaré aquí, las quieren modificar, así que empecemos:

Primero, se van a la edición HTML de donde quieran poner las tabs, y agregan los estilos:

HTML:

<style>
#tabber-wrapper{
width:300px; /* Ancho del contenedor */
float:left;
word-wrap:break-word;
overflow:hidden;
text-shadow:1px 1px 1px #000
}
ul.tab-view {
float: left;
list-style: none;
height: 30px; /* Alto de la barra principal */
width: 300px; /* Ancho */
margin: 0;
padding: 5px 0;
font: 14px Arial; /* Tama単o y tipo de letra */
background: #42a2ce; /* Color de fondo de la barra principal */
-moz-border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;
}
ul.tab-view li {
float: left;
height: 31px; /* Alto de el fondo de la tab */
line-height: 31px;
overflow: hidden; /* Ocultar el contenido al sobrepasar el ancho/alto de las tabs */
position: relative;
margin: -1px 0 -1px 5px;
padding: 0;
}
ul.tab-view li a {
text-decoration: none; /* Decoracion del texto (underline, overline, line-through etc ) */
color: #fff; /* Color del texto */
display: block;
outline: none;
font-weight: 700; /* Grosor del texto */
padding: 0 12px;
margin: 0 0 0 0px;
}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{
color:#fff; /* Color del texto */
background:#026FA1; /* Color de fondo de la tab */
-moz-border-radius:4px; /* esquinas redondeadas */
-webkit-border-radius:4px; /* esquinas redondeadas */
border-radius:4px; /* esquinas redondeadas */
text-shadow:none;
}
.tab-wrapper{
overflow:hidden; /* Ocultar contenido al ser mas ancho que el contenedor */
clear:both;float:left;
width:300px; /* Ancho general */
margin-bottom:10px; /* Margen de abajo hacia arriba */
}
.tabber{
padding:5px 0 0 /* Margenes hacia adentro (puede variar dependiendo de cuantos numeros usen) */
}
</style>

Y ya estan los estilos, ahi esta comentado que es lo que deben modificar si quieren otros estilos.

Ahora lo que haremos, será agregar los scrips necesarios para que funcionen, para hacer esto, en la edicion HTML, buscamos </head> y justo arriba, agregamos:

HTML:

<script src='https://dl.dropboxusercontent.com/s/ri201thxmpvjnh7/tabs.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/j3x15mkglgvthxs/tabs2.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>

Y ya esta, ahi no tienen que modificar nada, ahora solo agregamos las tabs, para hacer esto, buscamos el lugar donde las queremos poner, y ahi agregamos el siguiente codigo:

HTML:

<!-- Inicio Tabs -->
<div id='tabber-wrapper' style='border-radius: 4px;'>
<ul class='tab-view'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div class='clear'>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
[COLOR="#FF0000"]AQUI EL CONTENIDO DE LA TAB 1[/COLOR]
</div>
<div class='tabber' id='tab2'>
[COLOR="#FF0000"]AQUI EL CONTENIDO DE LA TAB 1[/COLOR]
</div>
<div class='tabber' id='tab3'>
[COLOR="#FF0000"]AQUI EL CONTENIDO DE LA TAB 3[/COLOR]
</div>
<div class='clear'>
</div>
</div>	
<!-- Fin Tabs -->

Y listo, ya tienen las tabs, si quieren agregar una opción más, agrean <li><a href='#tab4'>Tab 4</a></li> abajo de <li><a href='#tab3'>Tab 3</a></li> y abajo de <div class='tabber' id='tab3'></div> agregan <div class='tabber' id='tab4'></div> y listo, ya tendrán una tab mas, eso es todo, espero que les sirva

DEMO en la sidebar

Agrego:

Si los que las quieren agregar en blogger, quieren agregar el contenido de cada tab, solo haciendolo desde los gadgets, el codigo HTML de las tabs, lo cambian por el siguiente:

HTML:

<!-- Inicio Tabs -->
<div id='tabber-wrapper' style='border-radius: 4px;'>
<ul class='tab-view'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div class='clear'>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<b:section class="tabcon" id="tabcon" maxwidgets="5" showadelement="yes"/>
</div>
<div class='tabber' id='tab2'>
<b:section class="tabcon" id="tabcon2" maxwidgets="5" showadelement="yes"/>
</div>
<div class='tabber' id='tab3'>
<b:section class="tabcon" id="tabcon3" maxwidgets="5" showadelement="yes"/>
</div>
<div class='clear'>
</div>
</div>	
<!-- Fin Tabs -->

Y listo, ya tendran las secciones para agregar el contenido, directamente desde gadgets, ahi pueden modificar:
maxwidgetd: El maximo de gadgets que cabran en la tab, por defecto lo deje en 5
showadelement: Es yes para poder agregar gadgets o no para no poder agregar gadgets. ahora les dejo una captura de como se verá:

Ahi en Seguidores es el contenido de la tab 1, Agregame a tus circulos el contenido de la tab 2 y Pagina de Facebook el contenido de la tab 3.

MorrisM · 12 May 2014

Está bueno, pero me costó trabajo entender de que se trata el tutorial. Si lo que quieres es ganar el concurso semanal pues deberías editarlo y ser más claro (poner imágenes).

Bruno · 6 Jul 2014

excelente... estaba pensando en como hacerlo :encouragement:

Tutorial: Tabs para tu blog/web

kanikase Seguir

MorrisM

Bruno