Tabs de ReyAnime

Comentario :
Bueno ahora les dejo el script mas el estilo de la manera que tiene reyanime para mostrar sus capítulos usando jquery, es muy bueno en lo personal me gusto mucho es simple pero perfecto!.
Espero que lo puedan implementar en sus plantillas.

Comenzemos!
Bueno como primera cosa tendrian que tener la libreria de Jquery en su blog, puesto antes del </head>; si no lo tienen pueden agregar esta linea :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Ahora colocamos este codigo antes de la linea </head>; :

<script type='text/javascript'> 
$(document).ready(function() {$(".contenido_tab").hide(); $("ul.tabs li:first").addClass("activa").show(); $(".contenido_tab:first").show(); $("ul.tabs li").click(function() {$("ul.tabs li").removeClass("activa"); 
$(this).addClass("activa"); $(".contenido_tab").hide(); var activatab = $(this).find("a").attr("href"); $(activatab).fadeIn(); return false;});});
</script>

Y.. estas lineas de css antes de la etiqueta  </b:skin> :

<style type="text/css">
ul.tabs{padding: 0;margin: 0 0 6px 0;list-style-type: none;height: 34px;background-color: #404040;}
ul.tabs li{font-family: "Arial", Times New Roman,serif;font-weight: bold;font-size: 13px;border: 1px solid #368ECF;border-radius: 2px;background-color: #2D81BE;padding: 2px 6px;text-transform: uppercase;display: inline-block;margin: 6px 3px;}
ul.tabs .activa{border: 1px solid #171717;border-radius: 2px;background-color: #171717;}
ul.tabs li a{color: #FFF;text-decoration: none;}
.contenedor_tab{background-color: #000;color: whitesmoke;padding: 5px;}
.opc-txt{font-family: Arial,sans-serif;font-size: 13px;text-transform: capitalize;color: #F7F7F7;font-weight: bold;width: 60px;background: url(http://reyanime.com/static/beta/img/vid.png) no-repeat;background-position: 10px 2px;padding-left: 30px;display: inline-block;}
</style>

Como lo inserto en un entrada?
bueno para insertarlo en sus entradas, tendrian que poner en modo HTML e insertar el siguiente codigo:

    <ul class="tabs">
        <div class="opc-txt">opciones</div>
        <li><a href="#tab1">A</a></li>
        <li><a href="#tab2">B</a></li>
        <li><a href="#tab3">C</a></li>
    </ul>
    <div class="contenedor_tab">
        <div id="tab1" class="contenido_tab">
        CONTENIDO1
        </div>
        <div id="tab2" class="contenido_tab">
        CONTENIDO2
        </div>
        <div id="tab3" class="contenido_tab">
        CONTENIDO3
        </div>
        </div>
    </div>

Recuerda que cuando coloques el código, no vayas a modo redactar porque blogger agregara códigos que harán que no funcione los tabs.