Cara Mudah Membuat Menu Multi Kolom pada Sidebar

Menu Multi Kolom the phatar
Alhamdullilah ahkhirnya saya bisa memposting lagi, setelah beberapa hari tidak dapat berbagi ilmu karena blog saya lagi rusak hehe… dan sekarang sudah kembali lagi. Nah untuk postingan saya kali ini mengenai Tutorial Blogger terbaru di blog saya, artikel yang akan saya tampilkan adalah Cara Mudah Membuat Menu Multi Kolom pada SidebarTujuan yang diambil dalam pembuatan menu ini adalah untuk membuat agar lebih ringksa halaman sidebar blog, dan juga membuat ringan blog kita agar SEO Friendly.
Apabila  teman-teman semua tertarik untuk membuatnya, ini dia cara-caranya :

 

1. Seperti biasa Login dlu ke dasbor blog anda.
2. Klik Layout => Edit HTML
3. Jangan lupa centang pada kolom Expand Template Widget
4. Cari kode seperti ini ]]></b:skin> untuk memudahkan pencarian dapat anda ketik Ctrl+F atau F3.
5. Apabila sudah ketemu copas kode yang ada di bawah ini tepat sebelum kode ]]></b:skin>
 

div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 80px; text-align: center;height: 23px;padding-top: 3px;vertical-align: middle;border: 1px solid #000;border-bottom-width: 0;text-decoration: none;font-family: “Times New Roman”, Serif;font-weight: 900;color: #000;}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FF9900;}div.TabView div.Pages{clear: both;border: 1px solid #6E6E6E;overflow: hidden;background-color: #FF9900;}div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;

 
Keterangan :
Angka warna merah=> lebar kotak menu utama
Angka warna biru => tinggi kotak menu utama
Angka warna hijau => warna font menu utama
Angka warna abu-abu => Warna background menu utama
Kode warna kuning=> warna border kotak utama
Kode warna orange => warna background kotak utama
6. Untuk langkah selanjutnya cari kode </head>, lalu kopas kode di bawah ini, lalu letakan tepat sebelum kode </head>

<script src=’http://superinhost.com/trikblog/tabview.js’ type=’text/javascript’/>

7. Lalu di Save
8. Bagaiman mudah kan? Tapi semua masih belum selesai. Untuk memasang di sidebar blog, seperti biasanya masuk ke Layout=>Page Element=>pilih Add Gadget yang nantinya agar kamu tempatkak menu multi kolom ini =>HTML/Javascript. Lalu masukkan kode di bawah ini :

<form action=”tabview.html” method=”get”><div class=”TabView” id=”TabView”><div class=”Tabs” style=”width:360px;”><a>Title menu 1</a><a>Title menu 2</a><a>Title menu 3</a></div><div class=”Pages” style=”width:360px; height: 260px;”>
<div class=”Page”><div class=”Pad”>Link 1 di menu 1 <br />Link 2 di menu 1 <br />Link 3 d1 menu 1 <br /></div></div>
<div class=”Page”><div class=”Pad”>Link 1 di menu 2 <br />Link 2 di menu 2 <br />Link 3 d1 menu 2 <br /></div></div>
<div class=”Page”><div class=”Pad”>Link 1 di menu 3 <br />Link 2 di menu 3 <br />Link 3 d1 menu 3 <br /></div></div>
</div></div></form>
<script type=”text/javascript”>tabview_initialize(‘TabView’);</script>

Keterangan :
Kod warna hujau adalah title menu anda
Kode warna biru adalah lebar dan tinggi menu multi kolom
Kode warna merah adalah isi dari menu anda
Alhamdullilah akhirnya selesai juga, jangan lupa di Save ya. Selamat mencoba and good luck…