Tutor: Float Heartbeat/Churp With Close Button

Assalamualaikum dan Hye.

Ada orang request kat Kihah macam mana nak but float hearbeat/churpchurp macam ni.

See? Tekan SINI. Okay. Kihah jumpa tuto ni kat blog Hanan. So, credit to her ;) Tuto ni untuk semua pengguna Nuffnang, ChurpChurp, Heartbeat, Says.my dan lain-lain. Teett. So, sebelum kita mulakan Tutor ni, korang kena baca entry INI. Like gambar >SINI< kejap. Tonyoh SINI, tekan SINI. Hahahaha. Jom Mulakan bebeh!

Template Designer - Denim, Simple dan lain-lain

1. Dashboard > Design > Page Elements > Add A Gadget > HTML/JavaScript

2. Pastekan kod ni diruangan tu.

<style type='text/css'>

#topbar{

position:absolute;

margin: 90px -40px;

padding: 0px;

width: 130px;

visibility: hidden;

z-index: 100;

}

</style>

<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="fromtop" //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.right=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.stayTopRight=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("stayTopRight()", 10);

}

ftlObj = ml("topbar");

stayTopRight();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBkBOhhQYwI/AAAAAAAABGg/lW2a6h4cp
bo/s320/close.png" border="0" /></a>

<a href="http://www.churpchurp.com/faqihahfatinhusni23/share/KiaFB" target="_blank"><img src="URL GAMBAR" border="0" /></a></div>

Notaa

Kod merah tu anda boleh gantikan dengan kod hearbeat/ChurpChurp/Nuff Korang.

Oren untuk URL ChurpChurp/Hearbeat/Nuff anda.

Hijau untuk URL Gambar.

3. Save.

Classic Template

1. Dashboard > Template > Search kod

<style type="text/css">

2. Pastekan kod ni kat atas kod tadi. Okayh?

<style type='text/css'>

#topbar{

position:absolute;

margin: 90px -40px;

padding: 0px;

width: 130px;

visibility: hidden;

z-index: 100;

}

</style>

<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="fromtop" //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.right=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.stayTopRight=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("stayTopRight()", 10);

}

ftlObj = ml("topbar");

stayTopRight();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBkBOhhQYwI/AAAAAAAABGg/lW2a6h4cp
bo/s320/close.png" border="0" /></a>

<a href="http://www.churpchurp.com/faqihahfatinhusni23/share/KiaFB" target="_blank"><img src="URL GAMBAR" border="0" /></a></div>

Notaa
Kod merah tu anda boleh gantikan dengan kod hearbeat/ChurpChurp/Nuff Korang.
Oren untuk URL ChurpChurp/Hearbeat/Nuff anda.
Hijau untuk URL Gambar.

3. Preview dulu. Kalau dah okayh, Save Template

So, untuk URL Gambar tu, Korang amiklah gambo ni atau gmbr korang sendiri okayh? Kalau nak amik, TEKAN SINI dulu

http://heartbeat.my/images/lp/heartbeat.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6J1S-XP4OGF3-UznXFStVs9e5f_do8j_O1eOhp9C6-Ai97Xl_P6fDV6gemfSovMVS_TmSvJz_JWdVcQcf8__LhQpsqQXKZovsH6ImOkhEaHeQd-gYct93-4sO4u1lnHgjJwdcBxBV1ib/s1600/Untitled-2.png

Okaylah. Kalau ambik. Comment eh ;3 Hahaha. Like gambar http://www.facebook.com/photo.php?fbid=219824398095626&set=a.219824341428965.52725.219232961488103&type=3&theater kejap.

Dah? TEKAN SINI untuk last. Kalau jadi tuto ni, Inform me kayh? Baii, Assalamualaikum :D