Cara Membuat Multi Kolom Pada Blog

Salah satu tips blog agar lebih cantik adalah dengan menambahkan menu, apalagi menu multi kolom. Selain mempercantik tampilan blog menu multi kolom ini banyak fungsinya, dimana fungsi utamanya adalahi memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.
Biasanya menu ini di isi dengan daftar link blog, recent comment, dll sesuai dengan keinginan Anda sebagai pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.

Cara membuat menu multi kolom cukup mudah. Berikut langkah-langkah yang dapat Anda ikuti:

Cara Pertama
1.Login ke akun Blogger Sobat
2.Masuk ke rancangan / design
3.Pilih Tata Letak
4.Pilih Add New Widget / Tambah Gadget / Element
5.klik HTML/Javascript.
6.Kemudian copy paste kode dibawah ini:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="gt;TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1

</div>
</div>

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

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2

</div>
</div>

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

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 3

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

<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Silahkan edit warna, ukuran menurut selera Anda.
7.Simpan, lihat hasilnya

Cara Kedua:
1.Login ke dashboard blog kamu
2.Pilih Rancangan »» Edit HTML
3.Download template lengkap dulu untuk berjaga-jaga jika terjadi kesalahan.
4.Beri tanda centang pada Expand widget template.

5.Tempatkan script berikut sebelum kode ]]></b:skin>

div.TabView div.Tabs { height:24px; overflow:hidden;}
div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

Sesuaikan kode warnanya dengan blog Anda, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML.

6.masukan script pemanggil berikut sebelum kode </head>

<script src="http://tab-menu.googlecode.com/files/tabcontent.js" type="text/javascript"></script>

7.Klik Simpan

Langkah berikutnya adalah menambahkan widget untuk menampilkan menu multi kolom, dengan cara:
1.Pada Rancangan element klik "Tambah Gadget"
2.Pilih widget "HTML/Javascript"
3.Masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Ketik kategori menu pada Sub Judul ..., kemudian masukkan url postingan yang akan ditampilkan pada Link ... di menu ...

4.Simpan, lihat hasilnya.

Artikel Terkait: