Hola Amig@
De seguro llegaste aquí por mi vídeo de youtube, pues espero hallas prestado mucha atención al igual aquí vas a encontrar los códigos tal y como lo dije en el vídeo así que bienvenido a mi blog de Mao Te Enseña...
Lo primero que que haremos es Presionar '' Ctrl + F '' esto nos abrirá el buscador donde tenemos que poner la siguiente palabra o código pero sin las comillas '']]></b:skin>''' y antes de esta pegaremos el siguiente código:
.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}
Despues de pegado el codigo vamos a darle a guardar plantilla para que los cambios tengan efecto.
2. Seguido del anterior paso vamos a volver a hacer uso del buscador, que abrimos usando las teclas ''Ctrl + F'' pero si ya esta abierto no habrá necesidad solo borramos lo que esta ahí escrito y escribimos lo siguiente '' </Head> '' y presionamos la tecla enter o le damos clic a buscar, una vez encontrado, antes de esta palabra vamos a pegar el siguiente 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>
3. Ahora después de hecho esto vamos a copiar el siguiente código el cual colocaremos en las entradas que queremos poner nuestro cuadro con opciones:
<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>
<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 para ver un ejemplo de como queda podemos ver el siguiente ejemplo:
o puedes visitar el video para aclarar dudas,
Ejemplo:
