NearVillalobos

Una modificacion mas de IdTabs, ahora con el estilo de AnimeID.Tv... veamos como agregarlo:

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>

IDtabs Animeid.TV | Editado por Danikallpa para blogger

Leer +

NearVillalobos

Twitcker es un servicio gratuito que nos permite mostrar en el blog los últimos tuits en forma de marquesina, como si de un anuncio de noticias se tratara. Lo que hace es mostrar en una barra todos los últimos tuits que hemos publicado, pudiendo configurar la velocidad con la que pasan, la forma como se muestran, los colores, enlaces, etc.
Puedes verlo funcionando aquí mismo, arriba de esta página.

Para conseguir este gadget de últimos tuits entra a Twitcker y da click en el botón Sign in with Twitter.

Autoriza a la aplicación para que se cree un script único para ti.

Una vez que lo hagas verás el nombre de tu usuario, y debajo un link para configurar las opciones de la barra de tuits.

Ahí verás una serie de opciones para tu barra de tuits, como por ejemplo controlar la velocidad con la que pasan los tuits, el color de la barra, si se muestran como marquesina o máquina de escribir, etc.

Una vez que termines de personalizarla da click en Create y tendrás el código, cópialo y luego entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código que has copiado.

La posición puedes elegirla para que se muestre arriba de la página, al final, o en un lugar concreto; si deseas esta última opción (por ejemplo para ponerlo en la sidebar) elige Own container dentro deTwitcker position. Ahí escribe TwitterTicker. Después en un gadget HTML/Javascript agrega esto:

<div id="TwitterTicker">
...Aquí el script...
</div>

Ahí deberás colocar donde se indica el script que te da Twitcker. De esta forma podrás mostrar tu barra de tuits en cualquier parte del blog.

Twitcker, para mostrar los últimos tuits en forma de marquesina

Leer +