Cara membuat Menu Multi Kolom di blogspot

Cara membuatnya sangatlah mudah, Beginilah Cara membuat Menu MultiTab View Sidebar di Blogspot tersebut

Ikuti langkah-langkah berikut:

• Login ke akun Blogger Sobat
• Masuk ke rancangan / design
• Pilih Tata Letak
• Pilih Add New Widget / Tambah Gadget / Element
• klik HTML/Javascript.
• 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="color:white">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>

Jangan lupa klik Simpan, Silahkan edit warna, ukuran menurut selera Sobat
atau

• Login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  
• tandai pada Expand widget template.
  
• kemudian 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 dg blog kamu, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML
  
• masukan script pemanggil berikut sebelum kode </head>
  

  <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

• Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan 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>

Terakhir klik SIMPAN.Selamat berexperimen untuk membuat menu multi kolom atau menu multi tab

info lebih lanjut klik di SINI