Home » » Cara Membuat dan Memasang Tab Menu 3 Kolom Di Blog

Cara Membuat dan Memasang Tab Menu 3 Kolom Di Blog

Tab View Menu 3 Kolom
Tab Menu 3 Kolom ini biasa di pasang oleh para pemilik blog pada kiri atau kanan posting. Tab menu ini berguna sangat efisien untuk memberikan informasi daftar isi pada setiap label yang kita tempatkan pada kolom tab menu. Biasanya label yang ditempatkan di tab menu 3 kolom ini adalah isi label atau label posting yang tidak terpasang pada menu bar yang ada. Kita bisa menempatkan 3 menu sekaligus dalam satu kotak. Cukup praktis dan efisien.

Seperti contoh di samping, pada tab menu terdapat 3 kolom yaitu Trik Blok, Software dan Game. Nah, mau tahu cara pembuatannya ? Ikuti langkah-langkah di bawah ini :
(Sebaiknya sebelum melakukan Penambahan Tab Menu ini, lakukan meng-Copy Paste kode Template yang teman punya kedalam dokumen seperti Microsoft Word untuk menghindari kesalahan)

1. Login pada blog yang teman miliki dan pada dasbor klik Template lalu klik Edit HTML.

2. Cari kode ]]></b:skin> dan Copy Paste script di bawah ini tepat di atas kode ]]></b:skin>.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Setelah meletakkan kode script di atas selesai,  cari Kode </head>, dan Copy Paste 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 != "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>

4. Setelah berhasil klik simpan.

Pada tahap ini belum lah selesai, kita kembali ke dasbor blog yang teman miliki.
1. Klik Tambahkan Gadget.
2. Copy Paste kode script di bawah ini pada kotak Tambahkan Gadget.

<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 Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/> </div>
</div>

<div class="Page">
<div class="Pad">

<li><a href="URL Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/> </div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="URL Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/>
<li><a href="URL Posting">Judul Posting</a></li><br/>
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script><noscript><a href="http://miniblogger28.blogspot.com/" title="Tuto Blog"><strong></strong></a></noscript>

Keterangan Script:
* Tulisan warna Biru isi dengan label posting yang teman punya.
* Tulisan Warna Coklat isi dengan Alamat Posting beserta Judul Posting yang teman punya.

Demikian Tutorial Cara Membuat dan Menambahkan Tab Menu 3 Kolom di Blog, semoga bermanfaat.-

0 komentar:

Post a Comment

* Komentarlah yang sopan dan tidak mengandung sarah.
* Jangan gunakan Kotak Komentar dengan promosi produk serta usaha yang anda miliki. Silakan gunakan sarana Review Produk dan Jasa di blog ini. Maaf, akan dihapus.
* Terima kasih atas kunjungan, komentar dan partisipasi yang diberikan.

.