Tabs para vídeos

Spike777 · 13 Jun 2015

Buenos estimados, estoy tratando de poner tabs para vídeos en mi blog pero no logro que funcione.

Según el tutorial que estoy siguiendo debo colocar este código antes de ]]></b: skin>:

Insertar CODE, HTML o PHP:

/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
 .contenedor_tab{
color: #5b5b5b
float: left;
clear: both;
display: block;
width: 640;
background-color: #3f3f3f;
margin-top: 0px;
border: 0px solid #3f3f3f;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #3f3f3f;
border: 1px solid #363636;
outline: 1px solid #363636;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: white;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:#121212;
}
ul.tabs li.activa{
color: #999;
background-color: #121212;
outline: 0;
border-top: 1px solid #121212;
border-left: 1px solid #121212;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

y este en la entrada:

Insertar CODE, HTML o PHP:

<table cellspacing="10px" width="640px"><tbody>
<tr><td>
<ul class="tabs">
<li><a href="#tab1">CAMBIAR TEXTO</a></li>
<li><a href="#tab2">CAMBIAR TEXTO</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">

/* COLOCA A QUI TU CONTENIDO */

</div>
<div id="tab2" class="contenido_tab">

/* COLOCA A QUI TU CONTENIDO */

</div>
</div>
<div style="clear:both;">
</div>
</td>
</tr>
</tbody>
</table>

Pero lo único que logro es esto:

prueba video

Ya he probado con otros tutoriales y el resultado sigue siendo el mismo :s

idumaya · 13 Nov 2015

Yo tampoco he podido amigo ya encontraste la solucion
si pudiste me ayudas por favor

juanlaberto · 13 Nov 2015

Te falta colocar esto antes del </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

idumaya · 16 Nov 2015

juanlaberto dijo:
te falta colocar esto antes del </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //ocultar capas
$("ul.tabs li:first").addclass("activa").show(); //activar primera pestaña
$(".contenido_tab:first").show(); //mostrar contenido primera pestaña
// sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeclass("activa"); //borrar todas las clases "activa"
$(this).addclass("activa"); //añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //leer el valor de href para identificar la pestaña activa
$(activatab).fadein(); //visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

no amigo no sirve :d

juanlaberto · 16 Nov 2015

Como que no si lo probe en un blog ahi rapido Derrotemos esta Crisis

- - - Actualizado - - -

Ctrol + F y buscar ]]></b:skin> y pegar antes de la etiqueta

/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: #999;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #F8F8F8;
margin-top: -1px;
border: 1px solid #E8E8E8;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #E0E0E0;
border: 1px solid #F8F8F8;
outline: 1px solid #E8E8E8;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:#f8f8f8;
}
ul.tabs li.activa{
color: #999;
background-color: #F8F8F8;
outline: 0;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

- - - Actualizado - - -

Buscar la etiqueta </head> y antes de esto pegamos este código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

- - - Actualizado - - -

En la entrada del blog pegar esto en la parte de HTML y editar agregar contendido aquí & Embed de Vídeo

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab2" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab3" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
</div>
<div style="clear:both;">
</div>

idumaya · 17 Nov 2015

juanlaberto dijo:
Como que no si lo probe en un blog ahi rapido Derrotemos esta Crisis

- - - Actualizado - - -

Ctrol + F y buscar ]=]=></b:skin> y pegar antes de la etiqueta

/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: #999;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #F8F8F8;
margin-top: -1px;
border: 1px solid #E8E8E8;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #E0E0E0;
border: 1px solid #F8F8F8;
outline: 1px solid #E8E8E8;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:#f8f8f8;
}
ul.tabs li.activa{
color: #999;
background-color: #F8F8F8;
outline: 0;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

- - - Actualizado - - -

Buscar la etiqueta </head> y antes de esto pegamos este código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

- - - Actualizado - - -

En la entrada del blog pegar esto en la parte de HTML y editar agregar contendido aquí & Embed de Vídeo

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab2" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab3" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
</div>
<div style="clear:both;">
</div>

Voy a probra de nuevo Gracias

Tabs para vídeos

Spike777

idumaya

juanlaberto

idumaya

juanlaberto

idumaya

Temas similares