Daftar Isi Blog dengan Tab View

Tab view bisa digunakan dengan dua kolom, tiga kolom atau lebih. Tetapi bagi saya sendiri lebih suka menggunakan tiga kolom.

Silahkan login pada blog sobat --- >>> pilih rancangan ---- >>> element laman.

Tentukan dimana tab view dipasang (sidebar kiri atau kanan).

Buat/tambah gadget yang baru, kemudian copy script dibawah ini:

<div><style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 84px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:3px solid #ffffff; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#ffffff; /* 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: #990000; /* Warna background Menu Utama Atas */ }

div.TabView div.Pages {clear:both;border-top:3px solid #ffffff;
/* Warna border Kotak Utama */ overflow:hidden; /* Warna background Kotak Utama */ }

</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: 279px;" class="Tabs">
    <a>Dftr Isi</a>
    <a>Journal</a>
    <a>E-Book</a>
    </div>
    <div style="width:279px; height:375px; " class="Pages">
  

 <div class="Page">
    <div class="Pad">

<ol>
<script style="text/javascript">
var numposts = 800;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Tokoh-Tokoh Psikologi</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Psi. Tokoh-Tokoh Psikologi?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<h3>Psikologi Kepribadian</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Psikologi Kepribadian?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol>

    </div>
    </div>
    <div class="Page">
    <div class="Pad">

<ol>
<script style="text/javascript">
var numposts = 800;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Jurnal Psikologi Perkembangan</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Q.Jurnal Psikologi Perkembangan?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<h3>Jurnal Psikologi Pendidikan & Konseling</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Q. Jurnal Psikologi Pendidikan dan Konseling?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol>

    </div>
    </div>
    <div class="Page">
    <div class="Pad">

<ol>
<script style="text/javascript">
var numposts = 800;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Clinical & Abnormal</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Z.Psikologi Klinis dan Abnormal?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Counseling & Education</h3>
<ol>
<script src="http://www.psychologymania.com/feeds/posts/default/-/Z.Pendidikan dan Konseling?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>

</ol>

    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script></div> 

Kemudian SAVE hasil editan sobat, dan lihat hasilmya

Download Scriptnya Disini : DOWNLOAD

Catatan: 

1. Sobat bisa mengganti link-link yang saya beri tanda warna dengan link yang ada pada blog sobat.

2. Alangkah bagusnya, memilih link itu sesuai dengan link kategori/label blog sobat, jadi yang muncul di daftar isi adalah kategori/label tulisan yang sobat pilih

3. Sobat juga bisa mengganti link setiap kolom (saya beri warna berbeda) dengan menu lain, misalnya recent post, popular post, yang srciptnya bisa sobat dapatkan secara mudah di google. searching aja, “cara membuat recent post atau popular post pada blog”.

4. Ukuran tab view juga bisa sobat ubah ukurannya, silahkan sobat lihat pada awal-awal kode HTML script ini.

Selamat Mencoba dan Membaca

Sumber : http://www.psychologymania.com/2012