Cara Membuat Tab View Widget Kategori

Kali ini saya akan membuat satu lagi tutorial mengenai salah satu fitur yang ada pada template Johny Sompret Banget, yaitu membuat Cara Membuat Tab View Widget Kategori. Sebelumnya saya juga pernah membahas cara membuat simple tabber pada sidebar. Ya rencananya saya nanti akan membuat semua tutorial tentang berbagai fitur yang ada pada template-template buatan saya. Tidak ada yang mesti dirahasiakan, semua fitur akan saya jelaskan satu persatu cara pembuatannya, sehingga ke depannya diharapkan Anda mampu membuat template sendiri, syukur bisa dibagikan kepada teman-teman blogger yang lain atau minimal dipakai sendiri. Dan siapa tahu setelah itu ada yang mau menjadi partner saya dalam membuat template blogger atau paling tidak membuat sebuah tutorial baru untuk bisa dibagikan kepada pengguna blogger, karena selama ini saya bekerja sendirian, bikin tutorial sendiri, bikin template juga sendiri, jadi kalau ada yang mau bantu, silahkan saya sangat berterima kasih sekali.
Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.

DEMO

Langsung saja pada cara membuatnya :

1. Pertama Anda meesti login ke blogger dengan akun Anda
2. Kedua pilih blog yang ingin anda tambahkan slider ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #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.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <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/AVvXsEiq38mz4Uw10KlhjsUMPs11SwwogPgTBBL5mlMKN3wzIFDoT3sS5bJexAsfpHmCr6EhkTUVZMOXY-CZMfh2ClFpQu6CSl_t8gAxJ-pnbQ6mtp01IX0-UGrTg2I2r2mtNWqDsS-Kjo1Ij30/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.
7. Kemudian masukkan 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>
8. Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode <div id='main-wrapper'>, 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(&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 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :
   

   <!-- spacer for skins that want sidebar and main to be the same height-->
   <div class='clear'>&#160;</div>
   
   </div> <!-- end content-wrapper -->

9. Terakhir, save templates dan lihat hasilnya. 

Nah itu tadi tutorial membuat tab view widget yang banyak ditanyakan oleh teman-teman blogger pada artikel sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Share this post

Berlangganan update artikel terbaru via email: