Tabs para vídeos

  • Autor Autor Spike777
  • Fecha de inicio Fecha de inicio
S

Spike777

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
 
Yo tampoco he podido amigo ya encontraste la solucion
si pudiste me ayudas por favor
 
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>
 
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>
Hacer clic para expandir...

no amigo no sirve :d
 
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>
 
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>
Hacer clic para expandir...

Voy a probra de nuevo Gracias
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

RandomThemes
FilMoves ! Clone ! Blogger Template !Abandono!
Respuestas
6
Visitas
872
RandomThemes
RandomThemes
Miroku97
Cómo hacer que un contenido de vídeo iframe se recargue al hacer clic en otra opción de tabs?
Respuestas
7
Visitas
721
Henry00jj95
Henry00jj95
K
Tabs con pestañas para loanding de las opciones del contenido HTML
Respuestas
2
Visitas
378
steafgt
S
Digitalplus
Problemas para reproducir videos en mi página
Respuestas
10
Visitas
428
enmanuel0309
enmanuel0309
I
  • Encuesta Encuesta
Tutorial: Tabs de Video o Cuadros Con varias opciones Para Blogger
2
Respuestas
27
Visitas
8K
emiliagonza2001
emiliagonza2001
Atrás
Arriba