1. Buscamos la etiqueta </head> y antes de ella agregamos las siguientes librerias:
<script src='http://dl.dropbox.com/u/23616660/ihojosestudios/FUTUdownloads/js/tipsy/jquery.tipsy.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>2. Agregamos las siguientes lineas antes de la etiqueta ]]></b:skin>
/* CSS Tabs AnimeID.Tv jQuery */
.tab_container {
display:table;
width:100%;
padding:10px 5px 05px;
margin:0;
table-layout:fixed;
margin-top:-23px;
}
.tab_content {
width:568px;
height:340px;
background:black url('http://dl.dropbox.com/u/6188287/files/template/load-cap.gif') no-repeat 50% 325px;
box-shadow:0 1px 1px #BBB;
overflow:hidden;
margin:0 auto;
position:relative;
text-align:center;
}
ul.tabs {
margin-left:-35px;
margin-right:-1px;
}
ul.tabs li:first-child:last-child{border-radius:4px 4px 0 0}
ul.tabs li:first-child{border-radius:4px 0 0 0}
ul.tabs li:last-child{
border-left:1px solid #4b6170;
border-right:1px solid #4b6170;
border-radius:0 4px 0 0;
}
ul.tabs li {
list-style:none;
padding:10px;
margin:0;
display:table-cell;
text-align:center;
box-shadow:inset 0 1px 0 0 #8da4b3,0 1px 2px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#6c899c),color-stop(1,#4b6170));
background:-moz-linear-gradient(center top,#6c899c 5%,#4b6170 100%);
background-color:#6c899c;
border-top:1px solid #4b6170;
border-bottom:1px solid #4b6170;
border-left:1px solid #4b6170;
border-right:0;
color:white;
font-family:arial;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
text-shadow:0 1px 0 #354752;
opacity:.9;
line-height:8px;
cursor:pointer;
position:relative;
-webkit-transition:opacity 300ms ease-in-out;
-moz-transition:opacity 300ms ease-in-out;
width:128px;
}
ul.tabs li a {
text-shadow:0 -1px 0 #233641;
color:white;
}
ul.tabs li:hover {
color:white;
}
html ul.tabs li.active, html ul.tabs li.active {
background:-webkit-linear-gradient(#3e5664,#a7a7a7);
background:-moz-linear-gradient(#3e5664,#a7a7a7);
box-shadow:none;
opacity:1;
text-shadow:0 -1px 0 #233641;
border:0color:white;
}3. Agregamos lo siguiente en la entrada donde se mostrara la caja de videos modificando lo resaltado en verde:
<ul class="tabs">
<li><a class='tip' title="Servidor 1" href="#tab1">Opcion 1</a></li>
<li><a class='tip' title="Servidor 2" href="#tab2">Opcion 2</a></li>
<li><a class='tip' title="Servidor 3" href="#tab3">Opcion 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 1
</div>
</div>
<div id="tab2" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 2
</div>
</div>
<div id="tab3" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 3
</div>
</div>
</div>
