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

tab view menu
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,

Berlangganan Artikel Referensi Kita

Masukkan alamat email Anda:

Related Post:

+ comments +24comments

wuih,bisa dicoba nih

Terimakasih Xpresi4share N Software Pro atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
4/5/12 23:57

silakan sob :)

10/5/12 12:41

Bagus nih,,,

10/5/12 12:56

Saya masih baru jadi yang di masukin ke konten 123 itu script anya atau apa sob...

iya script, gambar, dll semua bisa :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
14/6/12 23:01

ijin nyobain di blog ane gan :D

Terimakasih Cucunguk Rieut atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
6/7/12 19:56

Berhasil gan.. ni dia yg saya cri dari kmaren :D thanks.

Terimakasih Efendy bloggers atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
8/10/12 20:14

kalo 3 kolom gimana gan?
tapi bagus gan

Terimakasih cah xgangsa atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
8/10/12 20:15

kalo 3 kolom gimana gan?
tapi bagus gan

Terimakasih cah xgangsa atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
14/10/12 16:10

terima kasih semua atas kunjungannya :) semoga bermanfaat.

@cax xgangsa : pada contoh kodenya sudah saya buat 3 kolom kok :) semoga bermanfaat.

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
24/10/12 07:48

ini yg lagi saya cari bop.. makasih ni tutorialnya.. salam knal..

Terimakasih zamroniys atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
13/11/12 03:59

mantap

Terimakasih elhaq atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
24/12/12 20:43

kalo kita mau masukin label di multi kolom bisa gak ?
klo bisa gimana caranya ?

28/12/12 18:16

Mas, ane ada kesulitan sedikit. itu link yang bewarna ungu di isi dengan url atau apa?

28/12/12 22:17

@AeroDesign:
Bisa diisi dengan apa saja, misal widget recent post, popular post, atau gambar, ulr, dan lain-lain :)
semoga bermanfaat

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
28/12/12 22:21

@Rendy Dwi:
Bisa, sobat bisa mencari kode untuk widget label dan meletakkannya pada kode diatas untuk menggantikan teks berwarna ungu.

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
29/12/12 04:10

Gan Punya ane udah dari template otomatiis ,

Cara editnya gmana gan? kok yg muncul cuma judulnya doank?
Check di http://fans-fc.blogspot.com
Makasih gan

Terimakasih Urang Awak atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
30/12/12 05:44

@Urang awak:
kalau lihat source blog sobat kayaknya widget itu diberi nama tabs-widget.. jadi cari saja 'tabs-widget' di edit html blog sobat. Nah, isinya kan ada popular post, new articles dan tweets.. tinggal ganti saja yang dengan yang sobat inginkan.
makasih kunjungannya :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
19/2/13 07:05

Artikelnya sangat Menarik,
pengen mencoba nih,
BY :Blog Agus Murod

Terimakasih jejak blogger atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog

gan kalo mau nambah kolom , gimana ya ?

Terimakasih Rumah Indihome Jogja atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog

Sip, terima kasih...
saya coba bro....

Terimakasih butik busana muslim atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
14/5/13 08:05

Kalau buat blog wordpress kayak punya saya bisa tidak ya mas?

Terimakasih Toko Online Baru atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
22/8/14 18:21

@Mohammad Irfan Basuki
cara nya gimana?

20/4/17 00:37

cara meletakkan popular post, dll. pada tab menu itu bagaimana? kan sudah bawaan blogger sendiri.. mohon bantuannya bos. http://www.katapakguru.com

Terimakasih Dunia Maya atas Komentarnya di Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog

Post a Comment