Cara simple membuat menu Tab View Tiga kolom

01.30 Diposting oleh Unknown

Berawal dari blogwalking secara tidak sengaja mempunyai ide "bagaimana menghemat space di sidebar agar bisa leluasa tapi juga simple". Nah akhirnya dengan iseng-iseng ketemu mengenai Cara simple membuat menu Tab View Tiga kolom di sidebar blog .

Mungkin dengan menggunakan menu Tab view pada blog kita, akan memperluas space blog kita sehingga semua yang kita suguhkan di blog akan bisa terexsplore sesuai dengan keinginan kita. Selain lebih menambah ruang (space) mungkin juga menjadi suatu hal yang termasuk menarik buat suatu blog. Langsung saja ke pembahasan mengenai nagaimana Cara simple membuat menu Tab View Tiga kolom di sidebar blog seperti pada contoh gambar dibawah ini :

Langkah membuat menu Tab View 3 kolom :
1.Masuk pada blogger
2.Pilih Rancangan =>> klik edit html =>> centang exspand template widget
3.Pada edit html Tekan ( Ctrl + F ) untuk mencari kode, kemudian ketikan (cari kode) ]]></b:skin>, dan letakkan kode dibawah ini di atas kode ]]></b:skin>

4.Cari kode </head>
5.Setelah ketemu letakkan kode di bawah ini di atas kode </head>

// ----- 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>

6.Klik Save Template

Lanjut langkah berikutnya :
1.Masuk ke Rancangan (edit tata letak)
2.Klik "Tambah Gadget" =>> pilih "HTML Java Script".
3.Copy Paste kode dibawah ini dan masukkan ke dalam gadget HTML Javascript tersebut

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script><noscript><a href="http://indiana-net.blogspot.com/" title="Blog Tips And Trick"><strong>Blog Tips And Trick</strong></a></noscript>

Catatan :
Warna Merah adalah Judul Tab nantinya
Warna Biru adalah Isi dari Tab View nantinya
Pada isi Tab view, isikan sesuai dengan link, gambar, ataupun lainnya sesuai dengan keinginan.

4.Klik Save.

Silahkan mencoba dan semoga bermanfaat dan Terima kasih banyak atas kunjungannya.