Pasang Tab View di Blog

Hallo sebat blogger, masih semangat posting dong, hehe... pastinya. 

Jika diawal-awal ngeblog, tentunya blog kita masih tidak terlalu banyak konten/widget yang terpasang. Namun jika sudah lama biasanya blog kita semakin sesak, baik oleh widget apalagi yang telah mempunyai banyak iklan. Seperti halnya rumah, mungkin jika masih baru barang-barangnya pun tidak terlalu banyak. Baru setelah beberapa bulan apalagi sudah tahunan, maka barang-barang itu mulai menumpuk. Mau dibuang sayang, tapi kalo disimpan ga enak dilihat karena tempatnya sudah terlalu sempit. Kalo sudah begitu, masukan aja dalam lemari yang bisa menampung barang-barang tersebut.

Jika diibaratkan sebagai lemari, tab view ini pun hampir memiliki fungsi yang sama yakni untuk menyimpan barang agar terlihat rapi dan tidak berserakan. Barang dimaksud dalam blog bisa berupa widget, gambar dan lain-lain.

Cara membuat:

Loggin ke blogger > rancangan > edit html > centang expand template widget kemudian cari kode ]]></b:skin> dan simpan kode berikut di atasnya:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px ;
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 tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).

Selanjutnya cari kode </head> kemudian simpan kode berikut tepat di atasnya:

 

<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.
Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>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> 

 

Lihat tulisan biru width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Lalu 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..