Membuat widget tabview berdasarkan kategori asek

   Membuat widget tabview berdasarkan kategori - Pada posting kali ini, MBT's blog mau share tentang membuat widget tabview di blogspot. Pada umumnya, widget ini sering dijumpai di website - website ternama. Namun, anda juga bisa membuat widget ini sendiri. Widget ini mempunyai beberapa kelebihan diantaranya :
1. Mudah digunakan.
2. Pro
3. Hemat sidebar.

     Seperti pada umumnya, dibalik kelebihan pasti ada kekurangan. Begitu juga dengan widget satu ini. Widget ini bisa saja membuat load blog anda bertambah/lemot. Untuk mengatasinya, saya saranka setelah memasang widget ini anda langsung mengcompress CSS blog anda di http://cssdrive.com/index.php/main/csscompressor/.

Oke, langsung saja ke cara pembuatannya :
1. Login blogspot.
2. Klik Template, lalu menuju ke edit HTML.
3. Pada popup widow edit HTML, klik Lanjutkan dan Expand template widget. Jangan lupa gunakan CTRL dan F.
4. Cari tag ]]></b:skin>. Setelah ketemu, letakkan css berikut diatasnya.

 #tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}

ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}

ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}

ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;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{background:#eee;color:#026ab5;border-bottom:1px solid #eee}

.tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}

.tabber{padding:10px 0}

.tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}

.tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}

.tabber h2 a{color:#222}

.tabber h2 a:hover{color:#026ab5} 

    Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.

Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama. 

5. Langkah selanjutnya, cari kode </head>. Sudah ketemu? letakkan kode dibawah diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='https://masolis-javascript.googlecode.com/svn/trunk/tabview.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhE2bqYu0UDJ_4Azf80rf17RjVBnAfsmo9o6kLmLiELIit24GItZH9o2fFov6Db1XZn1XvcUyWq9BlFKt9OrEEPRTXIl5k1XqFSA4N3p_sSUnHY5cWgHQbMT2MazvolWaesy0CWeqH6hc/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";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='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}

//]]>

</script>

Keterangan,,...

Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.

6. Letakkan kode berikut sebelum kode </body>.

<script type='text/javascript'>

 //<![CDATA[

jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});

 //]]>

</script> 

7. Letakkan kode dibawah ini, dibawah kode <div id='main-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>

</ul><div class='clear'/>

<div class='tab-wrapper'>

<div class='tabber' id='tab1'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='tabber' id='tab2'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='tabber' id='tab3'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='tabber' id='tab4'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='tabber' id='tab5'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='tabber' id='tab6'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

<div class='clear'/>

</div></div>

  Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 7 diatas.

7. Langkah terakhir, klik Save template dan lihat hasilnya!.