Cara Membuat Floating Massage

Floating Massage ni sesuai untuk menulis status anda... samada anda berada di blog ke, anda tengah menaip entri ke... jadi apabila anda update status anda, sekurang2nya pengunjung akan tahu bahawa anda tengah online atau pun tidak.

Sesuai juga untuk mengiklankan apa2 perniagaan yang anda tengah lakukan...

Juga sesuai untuk membuat welcome note...
menarik bukan? kalau nak buat juga... Jom follow tutorial saya...

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget Javascript / HTML

3. Copy kedua-dua kod di bawah dan Pastekan ke dalamnya (kedua2 kod boleh dipaste sekali dalam satu widget)

Kod pertama:

<style type="text/css">

#topbar{
position:absolute;
color:#000000;
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>

*Bahagian yang saya highlightkan dengan warna merah, anda boleh customizekan ikut warna kesukaan anda...dan juga stail kegemaran anda serta background kesukaan anda...
** [updated 3/12/2010] untuk menukar warna teks... tukar dibahagian ini color:#000000; Untuk memilih kod warna yang anda suka... Pilih kat SINI.

Kod Kedua

<div id="topbar"><a href="" onclick="closebar(); return false"><img src="close.gif" border="0" /></a>Tutorial membuat Top/Bottom Bar Floating Message. Selamat mencuba!</div>

*bahagian yang saya highlightkan dengan warna merah itu... anda boleh letakkan kata2 anda...

4. Taipkan <sp> pada ruangan Title... dan kemudian save... mudahkan?

Kredit kepada : Mia Liana

Whitey Note: Selamat mencuba... dan jangan lupa tinggalkan komen selepas mengambil tutorial ini ya...=)