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:

blog

• Cara Mengetahui Blog ID Kita
• Aplikasi Mobile yang Sebaiknya Dimiliki Seorang Blogger
• Apa Itu Google Author Rank dan Bagaimana Cara Kerjanya ?
• Membuat Text Area yang Kreatif
• Cara Membuat Footer Blog Menjadi 3 Kolom
• Sekarang Anda Bisa Mention Nama Pengguna Dalam Post Dengan Google+
• Menu Navigasi Ajax Keren
• Model Bisnis Online yang Potensial
• Cara mengetahui kode HTML dari warna
• Cara Menambahkan Meta Description Pada Blog Dengan Menggunakan Setting/Pengaturan Blogger
• Menambahkan Emoticon/Smile Pada Posting Blog
• Page Rank Pertama
• Cara Mengatur Jumlah Post yang Ditampilkan Setiap Halaman Label
• 15 Alternatif Pengganti Google AdSense
• Cara Membuat Custom Permalink Pada Post Blog
• Cara Membuat Header Blog Berisikan Link
• 6 Cara Membuat Template Blog Menjadi SEO Friendly
• Mengganti Tag Heading Judul Blog Agar Menjadi Lebih SEO Friendly
• Cara Membuat Related Post Dengan Scroll
• Menambahkan Rel Canocial pada Blog
• Facebook Recommendations Bar Official Untuk Blogger
• Cara Memasang Kotak Follower Box Twitter Pada Blog
• Membuat Page Title Blog Menjadi Lebih SEO Friendly
• Cara Memasang Meta Keyword dan Deskripsi Blog
• Tampilan Baru

Tutorial

• Membuat Page Title Blog Menjadi Lebih SEO Friendly
• Cara Memasang Meta Keyword dan Deskripsi Blog
• Cara Membuat Chat Box Melayang Buka Tutup
• Cara Membuat Recent Post dengan Thumbnail
• Cara Membuat Auto Readmore
• Auto New Tab : Membuat Semua Link Otomatis Dibuka pada Tab Baru
• Cara Menghilangkan Tulisan Subscribe to: Post Comments (Atom) Pada Blog
• Cara Membuat Widget Daftar Isi pada Blog
• Cara Membuat Tombol Like Facebook Dibawah / Diatas Post
• Cara Membuat Spoiler pada Widget
• Cara Membuat Widget Recent Comments
• Cara Membuat Widget Top Commentators
• Cara Membuat Popular Posts Pada Blog
• Cara Membuat Recent Post Pada Blog
• Cara Membuat Tab Menu Blog
• Cara Menuliskan Kode HTML Pada Postingan Blog
• Cara Membuat Scroll Pada Widget

widget

• Cara Membuat Footer Blog Menjadi 3 Kolom
• Menu Navigasi Ajax Keren
• Cara Membuat Related Post Dengan Scroll
• Facebook Recommendations Bar Official Untuk Blogger
• Cara Memasang Kotak Follower Box Twitter Pada Blog
• Cara Membuat Breadcrumb Pada Blog
• Cara Membuat Chat Box Melayang Buka Tutup
• Cara Membuat Recent Post dengan Thumbnail
• Cara Membuat Auto Readmore
• Auto New Tab : Membuat Semua Link Otomatis Dibuka pada Tab Baru
• Cara Menghilangkan Tulisan Subscribe to: Post Comments (Atom) Pada Blog
• Cara Membuat Widget Daftar Isi pada Blog
• Cara Membuat Tombol Like Facebook Dibawah / Diatas Post
• Cara Membuat Spoiler pada Widget
• Cara Membuat Widget Recent Comments
• Cara Membuat Widget Top Commentators
• Cara Membuat Popular Posts Pada Blog
• Cara Membuat Recent Post Pada Blog
• Cara Membuat Tab Menu Blog
• Cara Membuat Scroll Pada Widget