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

author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

23 comments:

  1. ambil yg heartbeat tu yee ty

    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. Akak !
    Menjadilahh ! Terima kasih !
    Zati ambil gambar churp churp tue ea ? ^^

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

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

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

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

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

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

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

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

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

    ReplyDelete

Budi Bahasa Budaya Kita