Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog

Assalamualaikum teman..

kali ini saya akan share mengenai cara membuat tab menu view pada blog. tab menu view ini sangat tepat digunakan bagi teman yang ingin menghemat tempat pada blog, bahkan ini jauh lebih hemat bila dibandingkan dengan sekedar membuat scroll, karena dengan cara ini satu area widget bisa ditempati oleh beberapa widget. sebagai contoh teman bisa melihat pada sidebar kanan saya yang terdapat widget recent posts dan popular posts.

Langsung saja ya.. :) caranya memang cukup panjang, namun jika teman mengikuti tahapnya dengan benar, insyaallah tidak ada yang sulit :).

• pertama - tama masuk ke dashboard
• klik design
• pilih tab edit HTML
• untuk berjaga - jaga terjadi kesalahan saat kita memasukkan kode nanti, sebaiknya teman mengunduh dulu template teman yang sekarang dengan klik  download full template (sebaiknya selalu lakukan ini bila mengedit HTML template)
• Beri tanda cek pada expand widget templates
• Cari kode </head> dengan menekan tombol CTRL+F
• letakkan script ini tepat sebelum </head>

<script type='text/javascript'>
//<![CDATA[
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>

• Cari kode ]]></b:skin> dengan menekan tombol CTRL + F
• Letakkan kode berikut ini tepat sebelum ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

• Klik save dan pindahlah ke tab page elements
• Klik add a gadget
• pilih HTML/Javascript
• pada content masukkan kode berikut ini 

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

• Klik save
• Nah sekarang saatnya kita mengatur - atur kode HTML dan Script yang sangat banyak tadi :D

• Karakter - karakter berwarna merah merupakan kelompok ukuran. atur ukuran - ukuran tersebut sesuai kebutuhan blog teman
• Karakter - karekter berwarna biru merupakan kelompok warna, atur juga warna - warna tersebut sesuai kebutuhan blog teman
• Ganti karakter berwarna Hijau dengan nama yang teman inginkan untuk ditampilkan pada tab 
• Letakkan konten - konten pada karakter berwarna ungu, misalnya recent posts, popular posts, recent comments, dll
• selesaiiii.......

haaahh... bagaimana teman? bisa ? kalau bisa katakan "berhasil .. berhasil.. berhasil.. horeee" :D

Saya sendiri yang membuat post ini juga sangat capek karena cukup panjang juga :)

sukses buat teman - teman semua.

Regards,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: