Cara Membuat Tab View di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Tab View di Blog - Cara menambah atau memasang 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 cara 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.
Berikut cara membuat menu tab view di blog:

1. Masuk blogger >> Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
2. Cari kode ]]></b:skin>
3. Copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>

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

4. Simpan / Save Template.
5. Selanjutnya Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
6. 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 menambah menu tab view di blog, hanya membutuhkan kesabaran sedikit saja :D. Pengen blog sobat lebih cantik? Beri juga navigasi nomor halaman di blog.

Ditulis Oleh : ImHero ~ Tempat Berbagi Dan Saling Bertukar Ilmu

Anda sedang membaca artikel tentang Cara Membuat Tab View di Blog. Oleh Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mynametyo.blogspot.com/2012/12/cara-membuat-tab-view-di-blog.html" target="_blank">Cara Membuat Tab View di Blog</a>

:: Get this widget ! ::