Membuat Menu Melayang di Blog

Sebenarnya yang dimaksud menu melayang adalah sebuah menu yang ketika halaman blog di scrollbar ke atas maupun ke bawah, maka menu tersebut tetap dapat terlihat. Letaknya biasanya berada di sisi kiri blog seperti melayang. Seperti yang terlihat sisi kiri blog ini!

Ingin tahu cara membuatnya. Oke, langsung aja ke TKP!
1. Masuk ke Dasbor blog kamu
2. Klik Rancangan/Edit Laman lalu Tambah Gadget dan pilih HTML/Java Script !

3. Copy-Paste kode berikut ini!

<script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script><br /> <script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script><br /> <script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script><br /> <style> body{ font-size:75%; } a{ outline: none; } a:active{ outline: none; } #sideBar{ text-align:left; } #sideBar h2{ color:#F0FFFF; font-size:110%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold !important; } #sideBar h2 span{ font-size:125%; font-weight:normal !important; } #sideBar ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } #sideBar li{ margin:0px 5px 5px 10px; padding: 0 0 0 10px; list-style-type:none; display:block; background-color:#DA1074; width:177px; color:#FFFFFF; } #sideBar li a{ width:100%; } #sideBar li a:link, #sideBar li a:visited{ color:#FFFFFF; font-family:verdana; font-size:100%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0 0 0 20px; width:100%; } #sideBar li a:hover{ color:#FFFF00; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyxdoZQ64OnED2oxDHJbf2nxg0lu2z73SpVIHq6K_NiFuy1baMzozEobo3StMXDtDQrzbyarqnM2kSG_xsCvwtdnrD725zf1vA58JSVpnF8IkHM5vSlhagh9uFzvQJpOxB6hLh419codVZ/s320/left.collapse.border.png); background-position:top right; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ float:left; overflow:hidden !important; width:200px; height:320px; } #sideBarContentsInner{ width:200px; }</style><br /> <div id="sideBar"><div id="sideBarContents" style="display:none;"><div id="sideBarContentsInner"><h2>Left<span>Menu</span></h2><ul><li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul></div></div><a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wvLC9bp4GiGq6376PqXpfVp6lZLz2LAhciNJoB9NPCicvDeRFAOB9YiZhBdsmivCN6rQf-FHH_TjHeaPSTPdQ0isEIOYCx9GX7m1EWZVpqctgCfDUXVYtnKUpu5aP-VUCeEtzXQvZgL2/s320/sidebarcollapse.png" title="sideBar" /></a><br /> </div>

4. Save dan lihat Hasilnya

Catatan :
Ganti tanda # dalam tag < a href="#"> dengan alamat link kamu !
Link one, Link Two.., dst,  gantilah dengan Nama Link Kamu!

Selamat mencoba!