Buat Tab Menu Horizontal Melayang – Tab menu default blogger memang kurang memuaskan dari segi tampilannya. Oleh sebab itu banyak para master blogger membuat tab menu yang lain dari biasanya. Penerapan drop down merupakan tab menu yang sering dipakai oleh para blogger saat ini. Belum lagi, penambahan kelebihan lainnya yaitu tab menu yang melayang di atas blog merupakan fasilitas yang melekat pada tab menu yang satu ini. Selain itu tab menu yang satu ini memiliki tampilan yang cantik, sehingga cocok untuk dipasang di blog berplatform Blogger. Berikut langkah-langkah cara pembuatan Tab Menu Horizontal Melayang seperti dikutip oleh Eltelu.
Lihat pada bagian tab menu
1. Login dengan akun anda di Blogger.
2. Dari dasbor pergi ke Template > Edit HTML > Lanjutkan.
3. Cari kode ]]></b:skin> (Ctrl+F) dan sisipkan kode berikut tepat di atasnya.
.bilah-menu-atas { width: 100%; min-width: 960px; position: fixed; top: 0px; left: 0px; right: 0px; height: 27px; font-size: 13px; z-index: 99; white-space: nowrap; background-color: #e8e8e8; background-image: -moz-linear-gradient(center
top , rgb(20, 132, 206) 0%, #336699 100%); box-shadow: 0px 2px 0px rgb(14, 90,
140); border-bottom: 1px solid rgba(255, 255,
255, 0.1);
}
.kolom-utama { -moz-transition: all 0.2s linear 0s; width: 960px; height: auto; margin: 0px auto;
}
.kolom-menu { width: 521px; height: auto; margin: 0px 0px 0px -41px; float: left; display: inline;
}
.kolom-menu ul { height: auto; margin-top: 0px;
}
.kolom-menu ul li { float: left; position: relative; list-style: none outside none;
}
.kolom-menu ul li:first-child { border-left: 1px solid rgba(30, 30, 30,
0.125);
}
.kolom-menu ul li a { color: #ffffff; font-weight: bold; text-shadow: -1px -1px rgba(0, 0, 0,
0.2); text-decoration: none; display: inline-block; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; position: relative; border-right: 1px solid rgba(30, 30,
30, 0.125); box-shadow: 1px 0px 0px rgba(255, 255,
255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus { background-color: rgba(255, 255, 255,
0.125);
}
Keterangan:
Warna kuning: Menunjukan kode warna tampilan pada tab menu. Harap sesuaikan dengan warna yang anda inginkan. Cara mendapatkan kode warna? Silahkan klik Disini.
4. Kemudian cari kode <body> (Ctrl+F) dan sisipkan kode berikut tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://url-bloganda.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqrlazs-VkOOey_fgRoFWfAAfKe2DZhvGtKHMZ9RIIxKWYh1do5eSByAXX0-szj24iMb4yxhZj9-zThPUBMgFqQsygvPzbiIM-OW6q2bnTqDvcdkd9E539v3zZpWfme534C1jzw-qgqM/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a>
<ul class="children">
<li><a href='URL'>Menu Kiri 2.1</a></li>
<li><a href='URL'>Menu Kiri 2.2</a></li>
</ul>
</li>
<li><a href='URL'>Menu Kiri 3</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a>
<ul class="children">
<li><a href='URL'>Menu Kanan 1.1</a></li>
<li><a href='URL'>Menu Kanan 1.2</a></li>
</ul>
</li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>
Keterangan:
Warna oranye : Ganti dengan url blog anda.
Warna merah : Menunjukan url gambar home, untuk menu ke halaman utama. Dapatkan url gambar anda Disini.
Warna hijau : Ganti dengan url tujuan tab menu.
Warna biru : Ganti dengan teks tujuan tab menu.
Perhatian:
Perhatian kode tersebut, cermatilah kode tab menu di atas dan bagaimana cara menambah atau mengurangi menu. Serta perhatikan bagaimana membuat menu dropdown pada kode <ul class="children">.
5. Terakhir, klik Simpan Template.
Silahkan lihat hasilnya pada blog anda. Mengalami kesusahan? Silahkan tanya di kolom komentar artikel ini.
>>>Selamat Mencoba<<<
Anda telah membaca artikel tentang Buat Tab Menu Horizontal Melayang dengan url http://superrefreshing.blogspot.com/2013/02/buat-tab-menu-melayang.html. Anda boleh menyebarluaskan atau mengcopy artikel Buat Tab Menu Horizontal Melayang ini dengan catatan mencantumkan link sumbernya.
