Cara Membuat Daftar Isi Blog dengan Tab View

Daftar isi blog sangat penting, untuk memudahkan pengunjung, tentang konten-konten dan tulisan-tulisan apa saja yang ada dalam blog kita. Salah satu cara membuat daftar isi blog itu dengan menggunakan tab view. Blogspot memang sudah memiliki konten daftar isi ini, tetapi, kelihatan tidak terlalu artistic, dan menunya tidak bisa diedit.

Sebenarnya, dengan menggunakan tab view, bukan hanya daftar isi yang bisa dimunculkan, tentang tergantung dari kebutuhan dan keinginan sobat. Kita bisa menggantikannya dengan recent post (posting terakhir), popular post (posting terpopuler) atau konten lainnya, atau mengkombinasikan hanya dalam satu program, yaitu tab view. Jadi kegunaan tab view, juga bisa menghemat tempat yang ada dalam blog kita.

Tab view bisa digunakan dengan dua kolom, tiga kolom atau lebih. Tetapi bagi saya sendiri lebih suka menggunakan tiga kolom. Coba sobat perhatikan contoh tab view yang saya gunakan dibawah ini:

Tab View in saya gunakan di PSCYHOLOGYMANIA pada bagian sidebar kiri.  Dengan menu tiga kolom, yaitu daftar isi, Journal dan E-Book. Cantik bukan?

Jika sobat ingin memasang tab view di blog sobat, saya akan berbagi dengan sobat trik-trik bagaimana cara membaut tab view ini. Jadi sobat tinggal pakai saja, dengan mengganti konten sesuai dengan keinginan sobat.

Ok, kita lanjut bagaimana memasang tab view di blog sobat. Ikuti langkah-langkah dibawah ini:

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

Catatan: 

• Sobat bisa mengganti link-link yang saya beri tanda warna dengan link yang ada pada blog sobat. 
• 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
• 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”.
• Ukuran tab view juga bisa sobat ubah ukurannya, silahkan sobat lihat pada awal-awal kode HTML script ini.

Sumber: http://www.psychologymania.com/2012/02/cara-membuat-daftar-isi-blog-dengan-tab.html

Related post: