26 December 2011

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
http://2.bp.blogspot.com/-vBZoWkgpu5U/Thf6Ldtf3YI/AAAAAAAAHXI/uJRegcHYVMQ/s1600/Untitled-2.png

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

23 comments:

  1. utk washed denim, caner plak eyh..:)

    ReplyDelete
  2. Mira ambil nih eh ? :)
    Nak tanye , mcm mne na ltk churp-2 tuh , sekali tekan , keluar bnyk iklan .

    ReplyDelete
  3. Kihah, jadi lahh. Ambik yang logo heartbeat. Thanksss ;D

    ReplyDelete
  4. @ ♛ Dea Arematt ♛ : Kan ada untuk Template designer.

    ReplyDelete
  5. ambil satu tao :D masehhh

    ReplyDelete
  6. Akak !
    Menjadilahh ! Terima kasih !
    Zati ambil gambar churp churp tue ea ? ^^

    ReplyDelete
  7. Akak ! Menjadi lahh ! Terima kasih yaa ! :D
    Oh yaa zati ambil gambar churp churp tue ea kak ? ^^

    ReplyDelete
  8. ambik yang churp-2 tu tau , ty :)

    ReplyDelete
  9. Saya mintak izin share tuto nie ea. Nanti saya credit awk :)

    ReplyDelete
  10. mekaceh dik....dah lama dah akak cari tutorial ni..akak amek yang churp2 tu ek...thnkz..

    ReplyDelete
  11. mekaceh dik....dah lama dah akak cari tutorial ni..akak amek yang churp2 tu ek...thnkz..

    ReplyDelete
  12. salam kihah, kaalu nak tukar float tu letak kat sebelah kiri camne ye?

    ReplyDelete
  13. ambil yang gambar churp-churp tu ye......

    ReplyDelete
  14. Yes , jadi . Thankyou ye syg :)

    ReplyDelete
  15. Assalamualaikum Kihah. Thx untuk tuto ni. Saya ambik gambar ChurpChurp tu ye. :)

    ReplyDelete
  16. Terima kasih banyak banyak . Alhamdulillah . Arigatouuu !!

    ReplyDelete

Your words defines you