Hola a todos y bienvenidos sean a mi blog nuevamente.Hoy les traigo el c贸digo para colocar mas opciones de v铆deos.A veces tuve problemas con el c贸digo y no mostraba nuevamente las otras opciones de v铆deos o tambi茅n era el caso de que sal铆an las otras opciones debajo y descentrada.
Pero ahora tengo el c贸digo que realmente funciona como podes observar en este mismo blog. Por si acaso les dejare un blog de notas para descargarlo y ademas estar谩 ac谩 abajo escondido con el spoiler.
ESTOS SON LOS PASOS A SEGUIR PARA PONER TENER LOS TABS DE OPCIONES DE REPRODUCTORES DE V脥DEOS:
Primero que todo buscar la etiqueta en el editor de html de plantillas de blogger siguiendo la siguientes instrucciones:
Una ves ya hecho login en blogger dir铆gete al blog que quieras modificar y desglosa el men煤 y en plantilla haces clic y luego en editar html.
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}
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>
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>
Ahora vean un ejemplo para completar este articulo:
- >Three days Grace
- Epic song 1
- RockGrace
馃挰 Comentarios ()
Deja tu comentario
Escribir comentario