Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew

Untuk memudahkan pengunjung blog mencari artikel, sebaiknya sediakan daftar isi blog di Sidebar, atau di atas postingan atau dimana saja sesuai keinginan anda. Ada banyak cara membuat daftar isi. Ada Daftar Isi otomatis, ada juga Daftar Isi Yang dibuat secara manual.

Sebelum memulai Tutorial Membuat Widget Menu Tab View di Blog, saya terangkan dulu mengenai MENU TAB VIEW, bagi anda yang masih asing dengan nama Widget ini.

MENU TAB VIEW adalah sebuah widget dengan 1 kotak dan beberapa Menu diatasnya. Dengan satu kotak, MENU TAB VIEW bisa menampung banyak Daftar Isi dengan adanya Scroll. Dengan demikian, ruang di sidebar blog bisa lebih Hemat. Selain itu, menu tab view bisa di modifikasi sesuai keinginan kita mulai dari mengubah besar kotak, mengganti warna, memberi background gambar, dll.

Masih kurang mengerti ??? Perhatikan gambar disamping tulisan ini atau langsung saja lihat LIVE DEMOnya di sidebar BLOGGERBUGIS yang berisi Daftar Isi Blog BLOGGERBUGIS. ( Kalau belum di ganti dengan widget lain )

Selain Daftar Isi Blog, Menu Tab View juga bisa diisi dengan widget lain (Widget dalam widget dong.. hehehe...) Contohnya bisa anda lihat pada FOOTER ( Bagian paling bawah ) BLOGGERBUGIS yang berisi MENU TUKERAN LINK, KONFIRMASI, LINK SOBAT dan BANNER SOBAT. Klik pada Menu Konfirmasi, maka anda akan melihat WIDGET Google Friend Connect dalam WIDGET Menu Tab View.

Jika ingin memasang Widget MENU TAB VIEW pada Blog anda, berikut Langkah – langkahnya :

Langkah PERTAMA

Copy kode dibawah ini ( Gunakan CTRL+C ) lalu letakkan pada Page Element ( Elemen Halaman ) blog anda.

<br /> <div style="background-color: #ffe599;"> <form action="tabview.html" method="get"></div><div style="background-color: #ffe599;"><div id="TabView" class="TabView"></div><div style="background-color: #ffe599;"><div style="width: 100%;" class="Tabs"></div><div style="background-color: #ffe599;"><a title="<span style="color: red;">Ganti tulisan ini dengan title tab anda</span>"><span style="color: blue;">MENU 1</span></a></div><div style="background-color: #ffe599;"><a title="<span style="color: red;">Ganti tulisan ini dengan title tab anda</span>"><span style="color: blue;">MENU 2</span></a></div><div style="background-color: #ffe599;"><a title="<span style="color: red;">Ganti tulisan ini dengan title tab anda</span>"><span style="color: blue;">MENU 3</span></a></div><div style="background-color: #ffe599;"><a title="<span style="color: red;">Ganti tulisan ini dengan title tab anda</span>"><span style="color: blue;">MENU 4</span></a> </div><div style="background-color: #ffe599;"></div></div><div style="background-color: #ffe599;"><div style="<span style="color: red;">width: 99%</span>; <span style="color: red;">height: 200px</span>;" class="Pages"></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><!--Awal Menu 1--></div><div style="background-color: #ffe599;"><div class="Page"><div class="Pad"></div><div style="background-color: #ffe599;"><ul></div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599;"><span style="color: red;">DAFTAR ISI MENU 1.1</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599;"><span style="color: red;">DAFTAR ISI MENU 1.2</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599;"><span style="color: red;">DAFTAR ISI MENU 1.3 dst</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"></ul></div><div style="background-color: #ffe599;"></div></div></div><div style="background-color: #ffe599;"><!--Akhir Menu 1--></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><!--Awal Menu 2--></div><div style="background-color: #ffe599;"><div class="Page"><div class="Pad"></div><div style="background-color: #ffe599;"><ul></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 2.1</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU </span><span style="color: red;">2.2</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU </span><span style="color: red;">2.3 dst</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"></ul></div><div style="background-color: #ffe599;"></div></div></div><div style="background-color: #ffe599;"><!--Akhir Menu 2--></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><!--Awal Menu 3--></div><div style="background-color: #ffe599;"><div class="Page"><div class="Pad"></div><div style="background-color: #ffe599;"><ul></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 3.1</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 3.2</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 3.3 dst</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"></ul></div><div style="background-color: #ffe599;"></div></div></div><div style="background-color: #ffe599;"><!--Akhir Menu 3--></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><!--Awal Menu 4--></div><div style="background-color: #ffe599;"><div class="Page"><div class="Pad"></div><div style="background-color: #ffe599;"><ul></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 4.1</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 4.2</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><li></div><div style="background-color: #ffe599; color: red;"><span style="color: red;">DAFTAR ISI MENU 4.3 dst</span></div><div style="background-color: #ffe599;"></li></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"></ul></div><div style="background-color: #ffe599;"></div></div></div><div style="background-color: #ffe599;"><!--Akhir Menu 4--></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"></div></div></form></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599; text-align: left;"><script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/tabview-padapagelement4U.js"></script></div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;"><div style="font-size: 90%; text-align: left; text-shadow: 3px 3px 3px rgb(0, 0, 0);"><a href="http://blogger-bugis.blogspot.com" target="_blank" title="Klik Tab untuk melihat semua Daftar Isi Blog BloggerBugis">Daftar Isi Blog</a></div></div><br /> <ul><li>Jangan lupa Ganti tulisan <b><span style="color: red;">DAFTAR ISI MENU</span></b> dengan judul <b>ARTIKEL</b> anda.</li> <li>Ganti tulisan "<span style="color: red;">Ganti tulisan ini dengan title tab anda</span>" dengan Title Tab Anda ( Title adalah tulisan yang akan muncul saat mouse menyentuh Link, dalam hal ini TAB MENU</li> <li>Ganti tulisan "<span style="color: blue;">MENU 1</span>"dengan Nama Tab yang anda inginkan, misalnya, <b>BLOGGER, INTERNET</b>, dll</li> </ul><br /> <br /> <div style="background-color: yellow; color: red; text-align: right;"><b><span style="font-size: medium;">Langkah KEDUA</span></b></div><br /> Copy kode JavaScript dibawah ini :<br /> <br /> <script src="https://sites.google.com/site/bloggerbugis/js/tabview-padakodehtml.js" type="text/javascript"/>  <br /> <br /> Paste dibawah kode   <span style="color: blue; font-size: medium;"><b>]]></b:skin</b></span><br /> <br /> <ul><li>Kalau belum tahu dimana mencari kode <b>]]></b:skin </b>, Baca <b>2. MENAMBAH / MENGHAPUS KODE HTML TEMPLATE</b> di artikel <a href="http://blogger-bugis.blogspot.com/2011/03/mengedit-template-dan-menambahkan.html"><b style="color: red;">INI</b></a></li> </ul><br /> Selanjutnya <a href="http://blogger-bugis.blogspot.com/2011/02/keuntungan-dan-kerugian-copy-paste.html" target="_blank"><b style="color: blue;">COPAS ( Copy Paste )</b></a> Kode Berikut ini <b>diatas</b> kode   <span style="font-size: medium;"><b><span style="color: blue;">]]></b:skin</span></b></span><br /> <br /> <div style="background-color: #ffe599;">/* Menu Tab View Dari BLOGGERBUGIS</div><div style="background-color: #ffe599;">----------------------------------------------- */</div><div style="background-color: #ffe599;">div.TabView div.Tabs {</div><div style="background-color: #ffe599;">padding-top: 0px;</div><div style="background-color: #ffe599;">height: 24px;</div><div style="background-color: #ffe599;">overflow: hidden;</div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">/* Menu Utama */</div><div style="background-color: #ffe599;">div.TabView div.Tabs a {</div><div style="background-color: #ffe599;">float: left;</div><div style="background-color: #ffe599;">display: block;</div><div style="background-color: #ffe599;">width: 85px; <b style="color: red;">/*ukuran lebar tab menu*/</b></div><div style="background-color: #ffe599;">text-align: center;</div><div style="background-color: #ffe599;">height: 24px;<b style="color: red;"> /*ukuran tinggi tab menu*/</b></div><div style="background-color: #ffe599;">padding-top: 3px;</div><div style="background-color: #ffe599;">margin-right:2px; <b style="color: red;">/*jarak antar tab menu*/</b></div><div style="background-color: #ffe599;">vertical-align: middle;</div><div style="background-color: #ffe599;">border: 2px solid #000000; <b><span style="color: red;">/*warna border menu*/</span></b></div><div style="background-color: #ffe599;">border-bottom-width: 0;</div><div style="background-color: #ffe599;">font-family: "Trebuchet ms", Times New Roman, Serif; <b><span style="color: red;">/*jenis huruf menu*/</span></b></div><div style="background-color: #ffe599;">font-size: 14px; <b><span style="color: red;">/*besar huruf menu*/</span></b></div><div style="background-color: #ffe599;">font-weight: bold;</div><div style="background-color: #ffe599;">letter-spacing: 0px;</div><div style="background-color: #ffe599;">background-color: #000000; <b><span style="color: red;">/*warna latar menu*/</span></b></div><div style="background-color: #ffe599;">color: #FFFFFF; <b><span style="color: red;">/*warna huruf menu*/</span></b></div><div style="background-color: #ffe599;">-moz-border-radius-topleft:10px;</div><div style="background-color: #ffe599;">-moz-border-radius-topright:10px;</div><div style="background-color: #ffe599;">-webkit-border-top-left-radius:10px;</div><div style="background-color: #ffe599;">-webkit-border-top-right-radius:10px;</div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">div.TabView div.Tabs a.Active {</div><div style="background-color: #ffe599;">background-color: #B40404; <b><span style="color: red;">/*warna background menu aktif*/</span></b></div><div style="background-color: #ffe599;">color: #f2f2f2; </div><div style="background-color: #ffe599;">font-weight: bold;</div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">div.TabView div.Tabs a:hover {</div><div style="background-color: #ffe599;">background-color: #f2f2f2; <b><span style="color: red;">/*warna background menu hover*/</span></b></div><div style="background-color: #ffe599;">color: #B40404;</div><div style="background-color: #ffe599;">font-weight: bold;</div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">/* Kotak Utama */</div><div style="background-color: #ffe599;">div.TabView div.Pages {</div><div style="background-color: #ffe599;">clear: both;</div><div style="background-color: #ffe599;">border: 2px solid #000000; <b><span style="color: red;">/*warna border kotak utama*/</span></b></div><div style="background-color: #ffe599;">overflow: hidden;</div><div style="background-color: #ffe599;">background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3bO1Q125TfOyInzpwa0XyMr5KDXCDyNoXytswMEmFt9GClV0bmRyQmtFp5lyvkIq4lE7VUg1jIbt6MrfVFCdcXcBrMGvipOW0l-vQnuGYEVP-zdbOjzPHGLAyt_x5DNN6QJ3wbLBhEd7_/"); <b><span style="color: red;">/*background kotak utama*/</span></b></div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">div.TabView div.Pages div.Page {</div><div style="background-color: #ffe599;">height: 100%;</div><div style="background-color: #ffe599;">padding: 0px;</div><div style="background-color: #ffe599;">overflow: hidden;</div><div style="background-color: #ffe599;">}</div><div style="background-color: #ffe599;"><br /> </div><div style="background-color: #ffe599;">div.TabView div.Pages div.Page div.Pad {</div><div style="background-color: #ffe599;">padding: 10px 5px;</div><div style="background-color: #ffe599;">font-size: 12px; <b><span style="color: red;">/*besar huruf kotak utama*/</span></b></div><div style="background-color: #ffe599;">}</div><br /> <ul><li>Anda bisa menyesuaikan pengaturannya sesuai dengan keinginan anda dengan mengganti angka, kode warna, gambar background, dll pada tanda keterangan yang berwarna <b><span style="color: red;">MERAH.</span></b> </li> <li>Untuk melihat <b style="color: blue;">kode warna HTML</b>, anda bisa lihat <a href="http://blogger-bugis.blogspot.com/2011/03/klik-warna-yang-anda-inginkan-kode.html" target="_blank"><b><span style="color: red;">DISINI</span></b></a> </li> <li>Tinggal klik warna yang anda inginkan lalu copy kodenya yang ada di bawah kotak <b><span style="color: blue;">KODE WARNA.</span></b></li> </ul><br /> <br /> Sudah dulu sob.....<br /> Kalau kurang mengerti, silahkan tuliskan pertanyaan anda di KOTAK KOMENTAR dibawah postingan ini.<br /> <br /> Jika ingin membuat Menu Tab View Tanpa Mengedit Kode HTML, klik<b><span style="color: red;"> </span><a href="http://blogger-bugis.blogspot.com/2011/03/cara-membuat-menu-tab-view-pada.html" style="color: red;" target="_blank">DISINI</a></b> <br /> Jika anda bingung cara mengisi Menu Tab Viewnya, silahkan baca tutorialnya <b><a href="http://blogger-bugis.blogspot.com/2011/04/cara-memasukkan-daftar-isi-blog-pada.html">DISINI</a></b> <br /> Salam Blogger..... </div>