Cara Membuat Tab View Widget Berdasarkan Label

Apa itu tab view widget?

Tab view widget yang saya ketahui adalah widget yang terdiri dari beberapa tab (biasanya 3 tab) dan diletakkan di sisi blog atau di side bar.

Untuk apa kita pasang tab view widget di blog?

Tab view widget kita pasang biasanya untuk meringkas beberapa widget menjadi satu halaman, sehingga tampilan blog akan menjadi lebih langsing karena cukup menggunakan satu halaman di sidebar sudah bisa kita letakkan beberapa widget.

Berikut ini piper comex akan berbagi pengalaman bagaimana cara membuat tab view widget berdasarkan label.

Untuk demo nya bisa anda liat dibawah postingan ini, atau gambarnya bisa dilihat diatas.

Beberapa hal yang harus diperhatikan dalam membuat tab view widget ini adalah:

• Apabila pada template anda sudah dilengkapi dengan widget slider animasi, agar diperhatikan kode script nya, jangan sampai ada lebih dari satu script dengan ektensi: min.js.
• Kemudian juga untuk kode: numposts dan showrecentposts jangan sampai sama dengan widget animasi sebelumnya (salah satu harus diberi tambahan kode, menjadi: numposts1 dan showrecentposts1, atau terserah anda yang penting tidak sama).
• Jangan lupa untuk mem-backup terlebih dahulu template anda, untuk jaga-jaga apabila terjadi kesalahan dapat dikembalikan ke kondisi semula.

Ok, langsung saja kita ke TKP.

Sebelumnya saya ingin menyampaikan terima kasih dulu kepada maskolis.com yang sudah bersedia berbagi tutorial mengenai cara membuat tab view widget kategori mantab banget. Tutorial ini memang sumbernya dari beliau, saya mencoba berbagi kepada anda dengan cara saya sendiri.

1. Masuk ke template >> edit HTML >> centang expand template widget.

2. Cari kode: ]]></b:skin> , kemudian masukkan kode berikut ini diatasnya.

#tabber-wrapper{width:630px;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:628px;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:628px;background:#eee;margin-bottom:15px} .tabber{padding:10px 0} .tabber .column{float:left;display:inline;width:143px;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 lebar halaman postingan blog saya 640px, maka lebarnya widget ini saya sesuaikan dengan saya beri nilai: 630px. Nanti di blog anda bisa disesuaikan kembali dengan kondisi lebar area posting blog anda dengan merubah nilai tersebut.

3. Selanjutnya cari kode: </head>,  kemudian masukkan kode berikut ini 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/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Basic Engine";Title2="Power Train";Title3="Kategori1";Title4="Kategori2";Title5="Kategori3";Title6="Bebas";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="143" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}} //]]></script>

Seperti saya jelaskan diatas, apabila di template anda sudah ada kode min.js. Maka kode: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> tidak perlu dipasang lagi.

Kemudian untuk kode title: Title1="Basic Engine";Title2="Power Train";Title3="Kategori1";Title4="Kategori2";Title5="Kategori3";Title6="Bebas", ganti label atau kategori warna biru tersebut dengan label atau kategori pada blog anda.

4. Berikutnya cari kode: </body>, kemudian masukkan kode berikut ini diatasnya.

<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>

5. Langkah selanjutnya adalah bagaimana cara menempatkan widget ini didalam blog anda. Jika kita ingin meletakkan widget tersebut diatas postingan, cari kode: <div id='main-wrapper'> ( atau yang mirip misalkan: area-posting, content-area dll. Kemudian letakkan kode berikut ini dibawahnya :

<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(" <script src=\"/feeds/posts/default/-/Basic Engine?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab2'><script>document.write(" <script src=\"/feeds/posts/default/-/Power Train?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab3'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori1?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab4'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori2?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab5'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori3?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab6'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori4?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='clear'/></div></div>

Yang harus diperhatikan pada langkah ini adalah kode-kode label atau kategori: Basic Engine, Power Train, Kategori1, Kategori2, Kategori3 dan Bebas pada kode diatas anda harus ganti sesuai dengan label atau kategori yang ada pada blog anda.

Apabila anda ingin meletakkan widget tersebut dibawah postingan seperti pada blog saya ini, cari kode: </div> <!-- end content-wrapper -->, atau yang mirip. Letakkan kode pada langkah 5 tadi diatasnya.

6. Simpan template, dan lihat hasilnya.

Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Selamat mencoba dan semoga bermanfaat.