Membuat Menu Melayang Selalu Tampil

Menu Melayang, ada
juga yang menyebut-
nya dengan floating
menu dapat berfungsi
sebagai apa saja
sesuai apa yang kita
kehendaki. Bisa Iklan.
Daftar Isi, Pesan,
Artkel Terkait dan
sebagainya. Pada
contoh gambar di
samping, saya misal-
kan digunakan untuk Daftar Isi. Floating Menu yang satu
ini selalu tampil dan tidak bisa ditutup atau diclose oleh
pengunjung, maka dari itu kita harus pintar-pintar me-
nempatkan widget ini agar tidak mengganggu yang lain-
nya. Cara memasangnya mudah. Tambahkan gadget
anda pada bagian mana saja dan pilih HTML/JavaScript,
copy kode yang ada di bawah lalu pastekan ke dalam
konten elemennya. Selesai.

Kode Scriptnya :

<div id="floatdiv" style=" position:absolute; width:210px;height:210px;left:0px;top:0px; padding:0px;background:#55FFFF; border:1px solid #9900FF"><b><span style="color:black;"; text-align="center">DAFTAR ISI :</span></b><br /><br /> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="210" height="180" align="center"> <a href="http://syamsudinnamaku.blogspot.com/2011/01/membuat-efek-salju-di-blog.html" target="_blank">Membuat Efek Salju di Blog</a><br /><a href="http://syamsudinnamaku.blogspot.com/2011/01/memasang-radio-streaming.html" target="_blank">Memasang Radio Streaming</a><br /><a href="http://syamsudinnamaku.blogspot.com/2011/01/memasang-musik-mp3-di-blog.html" target="_blank">Memasang Musik MP3 di Blog<br /> <br /> </a></marquee></div><br /> <script type="text/javascript"><!-- var floatingMenuId = 'floatdiv'; var floatingMenu = { targetX: -220, targetY: 530, hasInner: typeof(window.innerWidth) == 'number', hasElement: typeof(document.documentElement) == 'object' && typeof(document.documentElement.clientWidth) == 'number', menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; floatingMenu.move = function () { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; } floatingMenu.move2 = function () { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY - 190 + 'px'; } floatingMenu.computeShifts = function () { var de = document.documentElement; floatingMenu.shiftX = floatingMenu.hasInner ? pageXOffset : floatingMenu.hasElement ? de.scrollLeft : document.body.scrollLeft; if (floatingMenu.targetX < 0) { floatingMenu.shiftX += floatingMenu.hasElement ? de.clientWidth : document.body.clientWidth; } floatingMenu.shiftY = floatingMenu.hasInner ? pageYOffset : floatingMenu.hasElement ? de.scrollTop : document.body.scrollTop; if (floatingMenu.targetY < 0) { if (floatingMenu.hasElement && floatingMenu.hasInner) { // Handle Opera 8 problems floatingMenu.shiftY += de.clientHeight > window.innerHeight ? window.innerHeight : de.clientHeight } else { floatingMenu.shiftY += floatingMenu.hasElement ? de.clientHeight : document.body.clientHeight; } } } floatingMenu.calculateCornerX = function() { if (floatingMenu.targetX != 'center') return floatingMenu.shiftX + floatingMenu.targetX; var width = parseInt(floatingMenu.menu.offsetWidth); var cornerX = floatingMenu.hasElement ? (floatingMenu.hasInner ? pageXOffset : document.documentElement.scrollLeft) + (document.documentElement.clientWidth - width)/2 : document.body.scrollLeft + (document.body.clientWidth - width)/2; return cornerX; }; floatingMenu.calculateCornerY = function() { if (floatingMenu.targetY != 'center') return floatingMenu.shiftY + floatingMenu.targetY; var height = parseInt(floatingMenu.menu.offsetHeight); // Handle Opera 8 problems var clientHeight = floatingMenu.hasElement && floatingMenu.hasInner && document.documentElement.clientHeight > window.innerHeight ? window.innerHeight : document.documentElement.clientHeight var cornerY = floatingMenu.hasElement ? (floatingMenu.hasInner ? pageYOffset : document.documentElement.scrollTop) + (clientHeight - height)/2 : document.body.scrollTop + (document.body.clientHeight - height)/2; return cornerY; }; floatingMenu.doFloat = function() { // Check if reference to menu was lost due // to ajax manipuations if (!floatingMenu.menu) { menu = document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId]; initSecondary(); } var stepX, stepY; floatingMenu.computeShifts(); var cornerX = floatingMenu.calculateCornerX(); var stepX = (cornerX - floatingMenu.nextX) * .07; if (Math.abs(stepX) < .5) { stepX = cornerX - floatingMenu.nextX; } var cornerY = floatingMenu.calculateCornerY(); var stepY = (cornerY - floatingMenu.nextY) * .07; if (Math.abs(stepY) < .5) { stepY = cornerY - floatingMenu.nextY; } if (Math.abs(stepX) > 0 || Math.abs(stepY) > 0) { floatingMenu.nextX += stepX; floatingMenu.nextY += stepY ; floatingMenu.move2(); } setTimeout('floatingMenu.doFloat()', 20); }; // addEvent designed by Aaron Moore floatingMenu.addEvent = function(element, listener, handler) { if(typeof element[listener] != 'function' || typeof element[listener + '_num'] == 'undefined') { element[listener + '_num'] = 0; if (typeof element[listener] == 'function') { element[listener + 0] = element[listener]; element[listener + '_num']++; } element[listener] = function(e) { var r = true; e = (e) ? e : window.event; for(var i = element[listener + '_num'] -1; i >= 0; i--) { if(element[listener + i](e) == false) r = false; } return r; } } //if handler is not already stored, assign it for(var i = 0; i < element[listener + '_num']; i++) if(element[listener + i] == handler) return; element[listener + element[listener + '_num']] = handler; element[listener + '_num']++; }; floatingMenu.init = function() { floatingMenu.initSecondary(); floatingMenu.doFloat(); }; // Some browsers init scrollbars only after // full document load. floatingMenu.initSecondary = function() { floatingMenu.computeShifts(); floatingMenu.nextX = floatingMenu.calculateCornerX(); floatingMenu.nextY = floatingMenu.calculateCornerY(); floatingMenu.move(); } if (document.layers) floatingMenu.addEvent(window, 'onload', floatingMenu.init); else { floatingMenu.init(); floatingMenu.addEvent(window, 'onload', floatingMenu.initSecondary); } //--></script>

CATATAN :

1. Ubah Width & height-nya, Sesuaikan
    dengan isi di dalamnya.

2. Ubah juga angka pada targetX: -220 & targetY: 530,
    yang untuk mengatur penempataannya.

3. Ubah 'style.left' jadi 'style.right'
    bila anda ingin menempatkannya di sebelah kanan.

Selamat mencoba, semoga berhasil.

Semoga anda suka, good luck!