Cara Membuat "Tab View" pada Blogspot.com Versi I

Gambar berikut adalah tab view blog ini. Ada banyak cara membuat tab view pada blogger. Hal itu terjadi karena sitiap blog mempunyai pemograman yang berbeda-beda, sehingga terlahirlah berbagai bentuk cara untuk mempercantik blog. Pada tulisan "Membuat Tab View pada Blogspot.com" ini berawal dari pemikitan gimana supaya pengunjung blog lebih cepat untuk mencari tulisan-tulisan yang ada dalam blog. Secata otomatis Tab View ini dihubungkan langsung dengan fungsi scroll, sehingga dapat menghemat tempat juga. 

Banyak sekali manfaat Tab View ini. Salah satu contonya adalah seperti yang terdapat pada blog ini. Dimana semua judul tulisan tampil perkelompok dengan bentuk perLabel/perKategori. Selain itu juga, dlam Tab View ini kita dapat menampilkan Link-link yang berguna buat sobat blogger atau bahkan buat pengunjung blog kita.
Menu Tab View biasa digunakan oleh para blogger yang ingin mempercantik dan menghemat space pada halaman webnya.
Mungkin sobat blogger tidak sabar lagi ingin Menampilkan Menu Tab View ini pada blog sobat. Jika sobat blogger tertari, ayo kita kerjakan.....!!!

Untuk langkah pembuatan Menu Tab View ini cukup gampang sekali. Kita hanya butuh kode HTML yang akan kita gunakan.
1. Yang pertama masuk dulu ke blogger.com dengan account anda.
2. Pilih Tata Letak
3. Kemudian Tambah Gadget
4. Pilih HTML/JaveScript
5. Pastekan kode berikut ini ke dalam kolom HTML/JaveScript

<style type="text/css">
div.TabView div.Tabs
{height: 20px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 85px; /* Lebar Menu Utama Atas */
text-align:center ; height: 22px; /* Tinggi Menu Utama Atas */
padding-top:5px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#ff0000; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffe0; /* 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: 5px 5px}
</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: 350px;" class="Tabs">
<a>Tips Blog</a>
<a>Tips FB</a>
<a>Tips WP</a>
<a>Widget</a>
</div>
<div style="width:350px; height:300px; " class="Pages">
<div class="Page">
<div class="Pad">

Isi Tab View 1 (Tips Blog)<br/>

Isi Tab View 1 (Tips Blog)<br/>

Isi Tab View 1 (Tips Blog)<br/>

Isi Tab View 1 (Tips Blog)<br/>

Isi Tab View 1 (Tips Blog)<br/>

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

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

Isi Tab View 2 (Tips FB)<br/>

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

Isi Tab View 3 (tips WP)<br/>

Isi Tab View 3 (tips WP)<br/>

Isi Tab View 3 (tips WP)<br/>

Isi Tab View 3 (tips WP)<br/>

Isi Tab View 3 (tips WP)<br/>

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

Isi Tab View 4 (Widget Blog)<br/>

Isi Tab View 4 (Widget Blog)<br/>

Isi Tab View 4 (Widget Blog)<br/>

Isi Tab View 4 (Widget Blog)<br/>

Isi Tab View 4 (Widget Blog)<br/>

</div>
</div>


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

Silahkan lihat kode yang berwarna Merah, silahkan sobat pelajari kode tersebut untuk melakukan pengeditan. Kemudian ganti kode warna Hijau dengan keinginan sobat.

6. Kemudian Save.
Semoga bermanfaat, dan mohon maaf jika ada kesalahan. (Jkt/2012)