Cara Membuat Tab View yang keren

Selamat pagi, ayo kita bersama-sama membuka hari dengan perasaan yang bahagia, jika ada yang mempunyai masalah sebaiknya di hilangkan dulu, karena ini masih membuka hari, hilangkanlah perasaan buruk anda atau masalah anda pagi hari ini. ah ya, kemarin saya mendapatkan pesan dari buku tamu saya, bahwa ada seorang yang meminta saya bagaimana caranya untuk membuat tab view yang keren, karena malam hari saya sudah ngantuk dan mau tidur akhirnya pertanyaan itu saya jawab di artikel ini yang baru terbit hari ini. ya semuanya pastinya ingin mempunyai tampilan blog yang keren bukan, tetapi jika kita ingin mempunyai tampilan blog yang keren kita harus berusaha dong mencari ilmu-ilmu dari internet. contohnya saja saya pada awal memulai membuat blog ini saya tidak tahu menau tentang bagaiana caranya untuk mengedi tampilan blog menjadi bagus tetapi dengan keinginan yang keras saya pun mulai belajar sedikit sedikit. akhirnya saya pun tau lah sedikit-sedikit tentang blog. ehh malah jadi curhat deh saya, maaf yah. ok lah untuk menjawab pertanyaan dari kucingnya sponggeboob ehh maaf maksudnya gerry caplin, ini di bawah ini adalah tutorialnya untuk membuat tab view yang keren pada blog.

  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 ada di bawah ini

DEMO

 singkat saja, kegunaan widget ini adalah untuk membuat blog lebih ringkas, dan menarik. serta dapat memudahkan pengunjung menelusuri  artikel yang ada di blog kita. langsung saja ke caranya karena saya sudah tidak sempat lagi menulis panjang karena mau berangkat ke sekolah. langsung saja caranya berikut ini.

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='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGjmuh15P2mM6Gd9h1Ba2spxyG2hyphenhyphenAEFThNel_Nm4lI4_DLL7ToUuqpGoZjNfGNtf45x8KZNOJWFfc6namVl_QsSi4CdqISdesFbmJkiCXH9OBhr7ob2Y4F0h3lhFILOzRb4M6tRhw6w/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>

   
   

   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 :

   8. <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 ditanyakan oleh teman blogger pada buku tamu di hari sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

 Sumber : Creating Website