Ca

Template Toko Online Gratis

Bagi anda yang ingin membuat Toko Online dengan menggunakan blog, pastinya anda memerlukan template blog yang cocok untuk tampilan blog tok...

More Info

Membuat Kotak Komentar Keren

Untuk Postingan kali ini saya akan membahas tentang cara membuat kotak komentar pada blog agar terlihat keren dan tampilannya seperti pada ...

More Info

Cara Memperbaiki Hardisk Yang Rusak

Sudah lama sekali saya tidak pernah sharing tips-tips komputer buat sobat semua, dan kali ini postingan saya akan membahas tentang bagai...

More Info

Backlink Berkualitas Menurut Google

Pada Postingan kali ini saya akan membahas sedikit tentang Backlink yang berkualitas menurut google, tahukan Anda mengenai Backlink Yang...

More Info

Vertikal Hover Menu Keren

Pada Postingan kali ini saya akan membahas bagaimana caranya membuat Vertikal Hover Menu, kalau dilihat tampilannya mungkin sama dengan Ve...

More Info

Home »Label » Widget

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.