Cara Membuat Menu Tab View di Blog

Saya sendiri kadang bingung, banyak widget yang harus di tampilkan di sidebar blog saya tapi karena tempat tidak mencukupi akhirnya tidak saya pasang. Untuk mengatasi semua itu kita bisa memakai cara dengan membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.

• Masuk Blog Sendiri pasti nya
• Posisi Dasbor klik "Rancangan"
• klik "Edit HTML" Seperti biasa juga Centang tuh Expand yang pasti di Ceklis (Jaga-Jaga Biar Aman)
• Kemudian untuk pencarian tahap-tahap kode anda tinggal ketik Ctrl+F atau F3 untuk mempermudah pencarian ini (cari kode nya jangan diliatin aja)  

Kode ini yang dicari : ]]></b:skin>
Kode diatas kalau sudah ketemu, terus anda Copy kode bawah ini kemudian paste tepat di atas kode pencarian sebelum nya ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan Kode diatas, ini untuk keterangan nya :
Angka 100 yang berwarna HIJAU merupakan lebar tabs (tab1, tab2, tab3).

Kode Warna diatas ditandai dengan warna BIRU yang merupakan Warna yang akan disesuaikan dengan Blog anda dan akan lebih mudah anda biarkan saja terlebih dahulu dan mengikuti langkah selanjutnya, bila sudah berhasil dengan langkah selanjut nya anda tinggal kembali pada "Edit HTML" dan mengikuti pencarian sebelum nya ]]></b:skin> Centang tuh Expand yang pasti di Ceklis JANGAN SAMPAI LUPA CENTANG EXPAND

hihi..

Dan Selamat BerPARIASI WARNA ANDA

eits, jangan lupa itu kalau sudah jadi tapi kan langkah nya belum jadi !!!!!

So, kita teruskan selanjutnya dengan mencari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>

 

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian Simpan / Save Template.
atau anda bisa di PRATINJAU bila kurang YAKIN, he :)

Sudah anda SAVE TEMPLATE & tidak terjadi kesalahan, anda Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget (Tambah ELEMEN) >> HTML/Javascript

Copy kode di bawah ini di dalam box atau kotak HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit Cara Membuat Menu Tab View, hanya membutuhkan kesabaran sedikit saja :D

Simple kan, niyh termasuk Trick & Tips juga., Silahkan di coba & semoga berhasil.

Sumber : http://adf.ly/3Uo9j