Memasang Fixed Menu di Blog

Menu di blog berfungsi untuk mempermudah pengunjung blog menemukan konten yang mereka cari. Agar lebih mempermudah lagi, menu tersebut dibuat melayang atau float/fixed jadi ketika di scroll ke bawah atau ke atas menu akan tetap terlihat. Contohnya seperti menu yang ada di atas blog ini.

Pada kesempatan kali ini saya akan berbagi bagaimana memasang fixed menu di blog. Ada 2 (dua) cara memasang fixed menu yang akan saya bahas kali ini, yaitu dengan memasangnya di tubuh HTML/HTML editor dan/atau di layout HTML/JavaScript.

Sebelum memulai, saya akan membagikan kode-kodenya terlebih dahulu agar lebih mudah untuk mempraktekkannya.

1. Kode yang pertama adalah kode CSS yang akan digunakan pada fixed menu yang akan dipasang. Berikut adalah kode CSS nya.

#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}

2. Kode yang kedua adalah kode untuk mendeklarasikannya. Berikut adalah kodenya.

<div id='floating_menu'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>

A. Nah setelah kita ketahui kodenya, kita beranjak ke langkah-langkah memasang fixed menu metode pertama. Berikut adalah langkah-langkah memasang fixed menu di gadget layout.

1. Masuk blogger > Layout > Add gadget > HTML/JavaScript.

2. Tambahkan kode berikut

<div style="position: fixed; top: 0px; center: 0px;width:150px;height:130px;">

<style>
#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}
</style>

<div id='floating_menu'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>
</div>

3. Save dan lihat hasilnya.

B. Di atas adalah cara memasang fixed menu menggunakan metode pertama, dan sekarang memasang fixed menu menggunakan metode ke dua yaitu memasang fixed menu di tubuh HTML menggunakan HTML/Editor blogger (sumber). Berikut adalah langkah-langkahnya.

1. Masuk blogger > Template > Edit HTML > cari kode berikut ]]></b:skin>

2. Masukkan kode css berikut tepat di atas kode ]]></b:skin>

#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}

3. Cari kode </head> dan simpan kode berikut tepat di bawah kode </head>

<div id='floating_menu'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>

4. Simpan template dan lihat hasilnya.

Catatan: tanda # yang dicetak biru diubah dengan url menu anda.

Mudah yang mana langkah-langkahnya? silahkan pilih salah satu metodenya ya. Semoga artikel memasang fixed menu di blog ini bermanfaat. Semoga berhasil. Terima kasih sudah berkunjung.

Related:

Search Post

Label :