Cara Membuat Tab View Pada Blog

Cara Membuat Tab View Pada Blog

   5:54 AM       Research

---

Membuat menu tab view di blog itu sangat diperlukan bagi blogger yang ingin membuat desain blognya terlihat lebih profesional dan hemat ruang.

Apakah kita pernah mengunjungi sebuah blog dan melihat adanya menu tab view yang di pasang di sidebarnya? Atau apakah kita sendiri belum tahu apakah menu tab view yang dimaksud beserta kegunaannya?

Menu tab view adalah sebuah pernak-pernik blog yang menampilkan beberapa widget yang berbeda kemudian digabungkan penempatannya menjadi satu bagian dalam bentuk tab-tab yang terpisah. Fungsi dari menu tab view ini bisa kita gunakan untuk menghemat ruang di bagian sidebar maupun footer dan membuat kesan tampilan blog kita terlihat lebih profesional.

Seperti yang kita tahu jika kemudahan akses pembaca dalam menjelajahi blog kita ini sangat diperlukan. Selain menguntungkan bagi kita karena blog kita dapat dieksplorasi dengan baik, blog yang mudah diakses juga menciptakan adanya efisiensi dalam menempatkan widget blog agar terbaca oleh pembacanya. Salah satu fungsi lain dari adanya menu tab view ini adalah kemudahan bagi pembaca dalam mengakses widget-widget dalam blog kita.

Cara yang digunakan untuk membuat menu tab view ini juga relatif mudah. Kita hanya perlu sedikit memodifikasi HTML template blog dengan penambahan kode HTML dan javascript baru.

Adapun cara untuk membuat menu tab view di blog milik kita adalah sebagai berikut:

Langkah pertama.

Masuk ke akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari kode berikut.

]]></b:skin>

Letakan kode berikut di atasnya.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Cari kode berikut.

]]></b:skin>

Letakan javascript berikut di bawahnya.

<script src="http://panduanbelajarblog.googlecode.com/files/tabview.js" type="text/javascript"/>

Klik simpan dan selesai.

Keterangan:

1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML yang diinginkan pada HTML blog kita.
2. Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi jika kita mengalami kegagalan saat editing berlangsung.

Langkah kedua.

Klik menu rancangan.

Klik add gadget.

Pilih HTML/JavaScript.

Masukan kode berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

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

Klik simpan dan selesai.

Penggunaan menu tab view ini sangat bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita menjadi lebih profesional.