Top/Bottom Floating Bar Message

 

Tutorial ini akan membantu anda dalam membuat Mesej dalam bentuk bar secara terapung apabila laman blog anda di scroll ke atas atau ke bawah. Mesej terapung ini akan bergerak dengan lembut ke atas dan ke bawah. Ia tetap akan kekal di kedudukannya yang asal.

Mesej ini boleh menarik perhatian pengunjung laman blog anda dan anda boleh menukar teks mengikut kehendak anda seperti yang dipaparkan dalam blog Mia ini.

Terdapat 2 script untuk menghasilkan mesej terapung ini.

Top Bar Script 1
<style type="text/css"> #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: white; width: 400px; visibility: hidden; z-index: 100; } </style><br /> <br /> <script type="text/javascript"> /*********************************************** * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com) * Sliding routine by Roy Whittle (http://www.javascript-fx.com/) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="frombottom" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>

Top Bar Script 2
<div id="topbar"><a href="" onclick="closebar(); return false"><img src="close.gif" border="0" /></a>Tutorial membuat Top/Bottom Bar Floating Message oleh Mia Liana. Selamat mencuba!</div>
Top Bar Script 1 dan 2  perlu di copy (Ctrl + C) dan di paste kan (Ctrl + V) ke dalam Gadget Baru dengan cara, Add a Gadget -> HTML/Javascript. Lokasinya di bawah Header Blog Title. Contohnya, Mia letak HTM/Javascript Gadget yang baru tu di bawah Header Blog Smile..Smile..Smile..

Ada 2 HTML/Javascript yang perlu anda buat. Satu untuk Top Bar Script 1 dan satu untuk Top Bar Script 2.

Perubahan Yang Boleh Dilakukan

Untuk perubahan mesej teks, anda hanya perlu menukar teks yang berada di dalam Top Bar Script 2 sahaja.  Contoh yang diberikan adalah "Tutorial membuat Top/Bottom Bar Floating Message oleh Mia Liana. Selamat mencuba!"

Background Color di dalam Top Bar Script 1 boleh diubah ikut selera anda. Contoh yang diberikan ialah white.

background-color = white; 

Kedudukan mesej bar terapung ini boleh diubah samada "frombottom" atau "fromtop" di dalam Top Bar Script 1. Contoh yang diberikan ialah "frombottom"

var verticalpos="frombottom"

Dan inilah hasilnya...

Selamat mencuba!

p/s: Sila tinggalkan komen di entri ini sekiranya anda ada pertanyaan atau menghadapi masalah dalam membuat tutorial ini.