Membuat Daftar Isi atau Menu Blog

Keuntungan dari kotak menu atau daftar isi blog (tab view) adalah untuk menghemat tempat, karena menu tersebut terdiri dari beberapa kolom dijadikan satu dalam satu tampilan. Hal lain dari pemadatan isi sidebar ini juga dapat meminimalisir bobot template, serta agar tampilan menjadi lebih rapi. Yang dicontohkan adalah sebanyak 3 kolom, tetapi dapat juga dimodivikasi menjadi 2 atau 4 kolom, bahkan dibuat hanya untuk 1 kolom pun bisa.

Mudah cara membuatnya, hanya dengan sedikit kreatifitas maka dapat memodifikasi sesuai keinginan. Adapun langkah-langkah detilnya, adalah sebagai berikut.

1. Masuk ke akun blogger.

2. Klik Rancangan, lalu klik Tambah Gadget pilih yang HTML/JavaScript. Masukan kode di bawah ini, yang sebelumnya terlebih dulu diberi kode-kode script tertentu.

<style type="text/css">
div.TabView div.Tabs
{height: 23px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 104px; /* Lebar Menu Utama Atas */
text-align:center ; height: 100px; /* Tinggi Menu Utama Atas */
padding-top:1px; vertical-align:left; border:1px solid #000000; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Tahoma", Serif; /* Font Menu Utama Atas */
font-weight:; color:#000000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #CCCCCC; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#EEEEEE; /* 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: 1px 1px}
</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: 320px;" class="Tabs">
<a>Judul Menu 1 (misalnya Daftar Isi)</a>
<a>Judul Menu 2 (misalnya Tukar Link)</a>
<a>Judul Menu 3 (misalnya Chat Box)</a>
</div>
<div style="width:316px; height:330px; " class="Pages">
<div class="Page">
<div class="Pad">
Menu 1 (masukan kode, misalnya script daftar isi)
</div>
</div>
<div class="Page">
<div class="Pad">
Menu 2 (masukan kode, misalnya script link blog)
</div>
</div>
<div class="Page">
<div class="Pad">
Menu 3 (masukan kode, misalnya script chat box)
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

a). Kode ini {height: 23px;overflow: hidden} menunjukkan tinggi judul menu, silahkan dimodifikasi kalau menginginkan tinggi yang berbeda. Sebab kalau tulisan judul menunya kepanjangan dari kolom judul tersedia, berarti memerlukan tempat tambahan agar judul menu menjadi 2 baris.

b). Ketahui dulu lebar sidebar blog Anda, kalau blog ini lebar sidebarnya 320px, ditunjukkan oleh kode ini <div style="width: 320px;" class="Tabs">. Nah, ganti ukurannya sesuai dengan kebutuhan, untuk mengetahui ukuran sidebar klik di sini.

c). Setelah langkah di atas selesai, angka tersebut dibagi 3 kalau menginginkan menjadi 3 kolom menu. Begitupun kalau hanya mau membuat 2 menu, maka cukup dibagi 2. Perubahan angka tersebut ditunjukkan pada bagian kode yang ini float:left; display:block; width:104px;.

d). Kode ini <div style="width:316px; height:330px; " class="Pages"> menunjukkan bahwa, style="width:316px; dikurangi 4px dari lebar sidebar (sebagai toleransi). Sedangkan height:330px; adalah tinggi kotak menu utama, silahkan atur tingginya sesuai yang diinginkan.

e). Agar terlihat klop dengan pewarnaan dasar template anda, sambil ngopi istirahat sejenak biar tidak stress. Silahkan disesuaikan jika menginginkan warna-warni berbeda. Sambil nyantai ngopi pilih warna-warna kesukaan, saya nyalakan rokok dulu. Mantap!

f). Yup kita lanjut lagi. Pada bagian tulisan kode script ditunjukkan oleh poin ke-2 yang di berwarna merah, ganti dengan tulisan sesuai kebutuhan sebagai judul menu utama.

g). Sedangkan pada tulisan berwarna biru adalah memasukan kode script, yakni menggantinya dengan kode yang dibutuhkan. Misalnya sesuai contoh-contoh menu blog di atas, kode-kode script tersebut kira-kira seperti di bawah ini, perhatikan hanya pada bagian kode yang berwarna biru saja.

• Script daftar isi, ada pada bagian kode yang berwana biru. Ganti tulisan yang berwana pink dengan alamat blog anda.

<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://devilmig.blogspot.com/feeds/posts/default?max-results=800&alt=json-in-script&callback=loadtoc"></script>
</div>
</div>

• Script link blog, ada pada bagian kode yang berwarna biru. Ganti tulisan yang berwarna pink, sesuai dengan alamat blog rekan Anda.

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

<a href="http://www.devilmig.blogspot.com/" target="_blank">Om Rame</a><br />
<a href="http://devilmig.blogspot.com/" target="_blank">Om Rame disiniii</a><br />

</div>
</div>

• Script chat box, ada pada bagian kode yang berwarna hijau. Ganti tulisan tersebut sesuai dengan kode script chat box blog anda, atau bisa juga diisi dengan kode lain misalnya recent comment

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

Masukkan kode script chat box di sini, seperti cara pada sub point di atas.

</div>
</div>

3. Jika semua kode-kode tersebut telah terpasang rapi maka proses telah selesai, silahkan klik tombol Simpan. Perlu diketahui, agar proses modifikasi kode di atas lebih enak ada baiknya dilakukan di notepad, setelah rubah merubah kode selesai tinggal copas ke kolom tambah gadget tersebut.

Oh yah, ada yang ketinggalan nih. Kalau hanya menginginkan menjadi 2 kolom maka kurangi saja pada salah satu bagian kode, begitupun kalau ingin menambahkan kolomnya lagi pun boleh menjadi 4 bagian.

• Mengurangi menjadi 2 kolom, hapus pada kode yang berwarna violet.

<a>Judul Menu 1 (misalnya Daftar Isi)</a>
<a>Judul Menu 2 (misalnya Tukar Link)</a>
<a>Judul Menu 3 (misalnya Chat Box)</a>

Yang ini di hapus juga.

<div class="Page">
<div class="Pad">
Menu 3 (masukan kode, misalnya script chat box)
</div>
</div>

• Menambahkan 1 kolom lagi, tambahkan pada kode yang berwarna abu-abu.

<a>Judul Menu 1 (misalnya Daftar Isi)</a>
<a>Judul Menu 2 (misalnya Tukar Link)</a>
<a>Judul Menu 3 (misalnya Chat box)</a>

<a>Judul Menu 4 (misalnya Recent Comment)</a>

Sisipi atau tambahkan juga pada bagian yang berwarna violet, jadinya seperti ini.

<div class="Page">
<div class="Pad">
Menu 3 (masukan kode, misalnya script chat box)
</div>
</div>

<div class="Page">

<div class="Pad">

Menu 4 (masukan kode, misalnya script recent comment)

</div>

</div> 

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

Busyet deh, panjang banget yah ulasannya. *njungkel*