Tabs para blogger con css y jQuery

Hola amigos de Ayudar Bloggers, en este tutorial les voy a enseñar a agregar tabs a su blog, lo hare de dos maneras, la primera sera para mostrar las ultimas entradas por categorias, y la segunda será, por ejemplo para agregar varias opciones de videos, asi que empecemos:

Tabs para blogger:

]]></b:skin>

Justo arriba de esa linea pegan el siguiente codigo:

  #tabber-wrapper{width:629px;float:left;word-wrap:break-word;overflow:hidden;margin: -8px 0 0 -8px;text-shadow:1px 1px 1px #000}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#fec700;display:block;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#000;background:#fec700;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;text-shadow:none;}
.tab-wrapper{overflow:hidden;clear:both;float:left;width:720px;margin-bottom:10px;}
.tabber{padding:5px 0 0}
.tabber .column{float:left;display:inline;width:163px;height: 254px;margin:7px 11px 5px 0;padding:2px 3px 5px;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
.tabber .column_img{border:5px solid #555;width:140px;height:180px;margin:10px 6px 5px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
.tabber .column_img:hover{border:5px solid #000;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.tabber h2{font:bold 11px Arial;line-height:14px;margin:0 5px 5px;text-align:center;text-shadow:1px 1px 1px #000}
.tabber h2 a{color:#ccc}
.tabber h2 a:hover{color:#fec700}
 ul.tab-view{float:left;list-style:none;height:30px;width:618px;margin:0;padding:5px;font:14px Arial;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}

Para cambiar el ancho general de las tabs, editan width:629px y lo cambian por el ancho que estedes quieran, si lo cambiaron tambien tendran que cambiar la otra opcion marcada en rojo, ya tienen los estilos, ahora solo agregan el script para agregar el javascript, que hara que las tabs cambien, busquen

body>

inmediatamente despues agregan el siguiente codigo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/ri201thxmpvjnh7/tabs.js' type='text/javascript'/>
<script src='https://sites.google.com/site/filesimges/js/tabs2.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>

Listo, ya tienen el javascript que las hara funcionar, ahora solo agregan este codigo donde quieren que aparezcan las tabs:

<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1">Aqui el titulo de la tab1</a></li>
<li><a href="#tab2">Aqui el titulo de la tab2</a></li>
<li><a href="#tab3">Aqui el titulo de la tab3</a></li>
<li><a href="#tab4">Aqui el titulo de la tab4</a></li>
</ul>
<div class="clear">
<div class="tab-wrapper">
<div class="tabber" id="tab1">
AQUI EL CONTENIDO DE LA TAB 1
<div class="tabber" id="tab2">
AQUI EL CONTENIDO DE LA TAB 2
<div class="tabber" id="tab3">
AQUI EL CONTENIDO DE LA TAB 3
<div class="tabber" id="tab4">
AQUI EL CONTENIDO DE LA TAB 4
<div class="clear">
</div>
</div>
</div>
</div> 

Y listo, ya tendran sus tabs, solo cambien lo que ahi les marca en rojo, si quieren una tab mas, solo agregen una line mas de  li y una de div, nomas fijense que tienen que cambiar el id.

Pero si lo que quieren es que salgan las tabs por qtiquetas, cambien

<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1">Aqui el titulo de la tab1</a></li>
<li><a href="#tab2">Aqui el titulo de la tab2</a></li>
<li><a href="#tab3">Aqui el titulo de la tab3</a></li>
<li><a href="#tab4">Aqui el titulo de la tab4</a></li>
</ul>
<div class="clear">
<div class="tab-wrapper">
<div class="tabber" id="tab1">
AQUI EL CONTENIDO DE LA TAB 1<div class="tabber" id="tab2">
AQUI EL CONTENIDO DE LA TAB 2<div class="tabber" id="tab3">
AQUI EL CONTENIDO DE LA TAB 3<div class="tabber" id="tab4">
AQUI EL CONTENIDO DE LA TAB 4<div class="clear">
</div>
</div>
</div>
</div>

Por

<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Animacion?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Accion?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Ficcion?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Comedia?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='clear'></div>
</div></div>
</div>
</div> 

Solo cambien lo marcado en rojo por su etiqueta.