Cara Membuat Widget Multi Tab View Pada Blog

Malam ini mau bagi-bagi tutorial nih... Dari judulnya sudah tau kan...Atau bahkan anda masih tidak tau apa itu widget tab view 3 kolom... Kalau anda sudah tau langsung saja ke tutorialnya bagi yang belum tau saya akan kasih tau apa itu widget tabview 3 kolom.

    Widget tab view 3 kolom adalah widget yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 buah widget lainnya agar tidak terlalu banyak memakan tempat. Kalau anda masih belum faham apa itu widget tab view 3 kolom itu apa... anda bisa melihat gambar diatas. Nah, bagi yang mau coba, Langsung saja..

Chek It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript.

2.  Pastekan kode dibawah ini

<style type="text/css">
 div.TabView
 div.Tabs
 {height: 30px;overflow: hidden}
 div.TabView div.Tabs a {float:left; display:block; width: 83px; /* Lebar Menu Utama Atas */ text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ padding-top:8px; vertical-align:middle; border:1px solid #000000; /* Warna border Menu Atas */ border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */ font-weight:bold; color: #000000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #777; /* Warna background Menu Utama Atas */ } div.TabView div.Pages {clear:both; border:1px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color: #F5F9FD; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden} div.TabView div.Pages div.Page div.Pad {padding: 5px 5px} </style> <script type='text/javascript'> //<![CDATA[ function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } //]]> </script> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 300px;" class="Tabs">
<a>Terbaru</a>
<a>Random</a>
<a>Label</a>
</div> <div style="width:261px; height:250px; "
class="Pages">
<div class="Page">
<div class="Pad">
<script src="https://kyoure45.googlecode.com/svn/Recent%20Post.js"></script> <script>var numposts = 14; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://kyoure.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"> </script>
</div>
</div>
<div class="Page">
<div class="Pad">
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=14;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="http://kyoure.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

<a href="http://kyoure.blogspot.com/2014/09/cara-membuat-widget-multi-tab-view-pada.html" target="_blank" title="Cara membuat Multi Tab View Widget">Widget by Kyoure</a>

</div>
</div>
<div class="Page">
<div class="Pad">
<div id="w2bFlashContent">
<div id="cl_option">
Loading... </div>
<div style='overflow:auto; width:ancho; height:300px;'><div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 9999;
</script>
<script src="https://kyoure45.googlecode.com/svn/Label.js">
</script>
<script src="http://kyoure.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

3. Simpan

Warna Merah Bisa Di Ganti Dengan Script Dibawah ini : Klik LINK nya !!
Macam-Macam Kode Script TAB VIEW : http://kyoure.blogspot.com/2010/09/menambahkan-most-popular-post-artikel.html


Keterangan :

   Warna :
- Biru : Keterangan Dari Menu Tab View, Silahkan Ganti Sesuai Keinginan Kalian Sendiri.
- Pink : Kode Dan Warna Ukuran dari tampilan menu tab view, Silahkan Ganti Sesuai Keinginan Kalian Sendiri.
- Hijau : Judul bagian Atas dari menu tab view, silahkan ganti sesuai keinginan kalian sendiri.
- Biru Muda : Ukuran Lebar Dan Tinggi Kotak Widget dari menu tab view, silahkan ganti sesuai keinginan kalian sendiri.
- Merah : Kode Widget Yang Di Tampilkan (Recent Post,Random Post,Label) Pada Menu tab view, kalian bisa                                        menggantinya dengan widget blog atau apapun yang kalian inginkan.
- Orange : URL Blog , Silahkan ganti dengan URL milik kalian.

Mungkin itu saja dari saya , saya ucapkan terima kasih bagi yang membaca, semoga bermanpaat.
selamat mencoba..