El post que buscas se encuentra eliminado, pero este también te puede interesar

Tabs para tu blog (blogger)

Hola de nuevo amigos Taringueros, en este post, les dejare un pequeño tutorial para que agreguen tabs a su blog (ver demo aqui), las tabs son de mucha utilidad, en mi caso en dos de mis webs, las utilizo para mostrar entradas de diferentes categorias, ejemplo en mi web de juegos online: Aventura, Accion, Autos, Carreras, etc, y en la de peliculas online: Animacion, accion, ficcion, etc, asi como tambien puede servir para las webs de peliculas online o videos, tener varias opciones de reproduccion, asi que sin mas, les dejo el tutorial y los codigos.

Tabs para tu blog (blogger)

Lo primero que tienen que hacer es irse a su blogger, Diseño - Editar HTML, y en cualquier lado (excepto b:skin) agregan este codigo javascript:


<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://1.bp.blogspot.com/-QjSndGbF0No/T-Nt3HgKsDI/AAAAAAAAG9o/cN6_Oy306rc/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost = 80;summaryPost1 = 240;numposts=12;numposts1=10;numposts2=8;Title1="Animacion";Title2="Accion";Title3="Ficcion";Title4="Comedia";Title5="Infantil";Title6="Terror";Title7="Drama";Title8="Suspenso";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><div class="title">'+removeHtmlTag(postcontent,summaryPost1)+'... </div></h3></li>';document.write(trtd);j++}}function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><div><img class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5><div class="title">'+removeHtmlTag(postcontent,summaryPost)+'... </div></div></li>';document.write(trtd);j++}}
function random_posts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
        
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="160" height="210" class="Thumbnail thumbnail carousel " src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
    document.write(trtd);


    j++;
}
    

}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts2;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}}

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/-QjSndGbF0No/T-Nt3HgKsDI/AAAAAAAAG9o/cN6_Oy306rc/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h3>'+relatedpoststitle+'</h3>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;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;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:127px;padding:0 10px;color:#ccc;height:38px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:16px;text-shadow:1px 1px 1px #000">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>


En este codigo, vienen por default 8 categorias (Animacion, Accion, Ficcion, Comedia, Infantil, Terror, Drama, Suspenso.) que son las que yo uso, para cambiarlas, solo cambian esas palabras por la de sus categorias, para quitar categorias,por ejemplo que yo quiera quitar Ficcion, quitarian esto: Title3="Ficcion"; y listo, ya tendria solo 7 categorias, eso seria todo en el javascript, ahora sigue el script y html que hace que las tabs funcionen, y seria este, lo agregaran donde quieren que aparezcan las tabs:


<div id='slide-wrapper'>
<div id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
<li><a href='#tab7'><script>document.write(Title7);</script></a></li>
<li><a href='#tab8'><script>document.write(Title8);</script></a></li>
</ul><div class='clear'/>


No cambien nada ahi, solo si quitaron una categoria, quitan una linea <li><a href='#tab8'><script>document.write(Title8);</script></a></li>, si quieren agregar, creo que es mas que obvio como

Asi que ya estan los dos scripts, y parte del html, continuemos, ahora para finalizar, y tener las tabs listas, agregan el ultimo html, es este:


<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Animacion?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Accion?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Ficcion?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Comedia?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Infantil?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Terror?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab7'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Drama?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab8'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Suspenso?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div>
</div>


Ahi, es igual, si quitaron una categoria, quiten una lina de <div class='tabber' id='tab8'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Suspenso?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;
</script></div> y listo, tendran 7, para agregar es igual, pero para que aparezcan las entradas dependiendo de sus etiquetas, cambian la etiqueta que yo tengo, en el ejemplo Animacion, Accion, Ficcion, y asi, que se encuentra enseguida de /feeds/posts/default/-/ y eso seria todo para mostrar entradas en tabs por etiquetas, pero si lo que quieren es cambiar las entradas, por ejemplo por un video, quitarian el script que esta dentro del <div class="tabber" id="tab"> y lo que agregaria seria el codigo embed o iframe del video, y listo, eso seria todo.

OPCIONAL: pueden agregar un poco de estilo con css, aqui les dejo el codigo que yo utilizo, pueden modificarlo:


<style>
#tabber-wrapper{width:720px;float:left;word-wrap:break-word;overflow:hidden;margin:0 0 10px 10px;text-shadow:1px 1px 1px #000}
ul.tab-view{float:left;list-style:none;height:30px;width:700px;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}
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}
</style>

Pueden agregar el codigo completo directamente entre <head y </head> o en b:skin quitando los <style>.

No se olviden de visitar mis paginas:
LoJuegas
Misterios y Web
Cien Online

1 comentario - Tabs para tu blog (blogger)

Troesma_Chila
Jajaja fomentando la piratería eh? Qué pensará el mesias herny?
Kanikase
Sin pirateria no hay dinero