Cara Float ads Nuffnang dengan close button


Untuk menjadikan ads Nuffnang sidebar float(terapung) dengan close button pada sebelah sisi kanan blog seperti yang boleh anda lihat pada contoh yang ada di blog ini, sila ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan teks Masukkan kod di sini dengan kod Nuffnang sidebar anda.

<style type='text/css'>
#topbar{
position:absolute;
margin: 0px -23px;
padding: 0px;
width: 130px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- &#169; 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/lW2a6h4cpbo/s320/close.png" border="0" /></a>
Masukkan kod di sini
</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

{ 45 comments.. read them below or add one }

admin admin 2:37 AM
This comment has been removed by the author.
wan9 wan9 2:42 AM
oke jadi pon.. thnx bro..
Me Me 6:35 PM
nescafe, kalau nak letak sebelah bawah kiri blog nak buat macam mana ya???

sebab sebelah kanan ada shoutbox...
Nescafe ais Nescafe ais 6:58 PM
@Me

Cuba guna kod ni

<style type='text/css'>
#topbar{
position:absolute;
margin: 490px -23px;
padding: 0px;
width: 130px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- &#169; 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.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>

<div id="topbar">
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBkBOhhQYwI/AAAAAAAABGg/lW2a6h4cpbo/s320/close.png" border="0" /></a>
Masukkan kod Nuffnang di sini
</div>
Me Me 9:55 PM
@Nescafe ais nescafe, kalau sudah ada iklan di sidebar n then saya letak kat tepi bawah kiri, tapi resultnya cuma ada satu saja iaitu disebelah bawah kiri sebaliknya di sidebar tak da... kenapa ya???
Nescafe aisNescafe ais 10:33 PM
@Me

Memang keluar satu ads sahaja. Tak boleh keluar dua ads yang sama
SyUhAdA SyUhAdA 1:19 AM
dah wat..
thanks...
SyUhAdA SyUhAdA 1:35 AM
aik???
nape x jd pon..hu3
Nescafe aisNescafe ais 1:43 AM
@SyUhAdA
Kena delete ads yang pada sidebar tu. Cuma satu ads sidebar sahaja yang boleh letak dalam satu blog
DaHLia DaHLia 5:31 PM
wahhh ada option baru lak..

terbaik laa neslo! :)
Fyzal Fyzal 10:20 AM
salam bro Nes! aiseh .. lama nya tak datang sini.. makin mantop blog bro Nes.

apa khabar bro Nes? kerja okay?
Amir Izzat Amir Izzat 1:57 PM
wah! dah guna...erm..macam mana nak buat gambar tue macam blog nie ha? macam gambar hiasan gak atas tue? kalau klik dia tak pi mana-mana??? boleh ajar tak? hurm..
Nescafe ais Nescafe ais 3:11 PM
@Fyzalw,salam.

Lama juga tak nampak yer. Hehe. Sekarang tengah bz kerja bro.

Lama juga tak singgah sini.
Nescafe ais Nescafe ais 3:12 PM
@Amir Izzat

Macam mana tu yer. Tak berapa faham maksudnya.

Buang link pada image tu erk?
Fina Fento Fina Fento 9:59 AM
en. nes, nape cuma kuar tanda pangkah je kat blog sy. iklannya takde :(
cuma copy kod tu n paste kod nuffnang je kan.
Nescafe ais Nescafe ais 11:46 AM
@Fina Fento

Kod Nuggnang yang pada sidebar tu kena delete. Tak boleh ada 2 ads sidebar yang sama dalam satu blog
Fina Fento Fina Fento 12:08 PM
ooo..oke. thanks :D
Mr K Mr K 8:52 PM
@Nescafe ais

Kalau aku nak letak sebelah bawah kanan? macam mana pula?
Mr K Mr K 8:55 PM
@Nescafe ais sorry, i mean, nak letak kat kanan, dan tengah2. Possible? dah cuba baca codes tapi agak rumit la
mrkazen mrkazen 9:53 PM
hahah nes ak da ubh xgune nuff ak letak logo ak sendiri huhu puas at -->>> www.khairulzamri.blogspot.com
Nescafe ais Nescafe ais 9:56 PM
@Mr K

Cuba ejas angka 0px pada margin. Cuba try letak 100px. Tengok, jadi tak kat tengah-tengah.
najib najib 1:57 AM
mula-mula x faham pesal cuma ader x jer,pas baca komen pembaca,dah faham,thank bro
shelliey shelliey 1:55 PM
i try tp xjd :(
miss3808 miss3808 12:15 PM
sawad d khar... urm, noi nak tanya.. muskil sangat.. lama dah tak buat benda2 ni.. heeeee... kod nuffnang yg mana ek?? yg paste kat sidebar ker??? heee.. pastu kena delete yg lama kan.. tak leh buh dua2 ek...
Aefa Aerisya Aefa Aerisya 12:07 PM
incik nescafe...thanks.. menjadi.. tp.. separuh ja iklan muncul.. separuh lagi tenggelam disebalik awan.. cane ek?
Abir Abhar Abir Abhar 5:20 PM
salam...
kalau ada floating untuk innit nuffnang macammana ea?
Cik Mulat Cik Mulat 9:19 AM
dah buat..tapi tak melekat kat tepi..mcm dh nak dekat tengah2 jek..knp ye?
:: Zanna :: :: Zanna :: 3:02 PM
thanx sgt berjaya apply dlm blog... ^.^
Ejoy Ejoy 5:20 PM
knp ada 2 iklan dgn suervey ar dlm pce site ...runsing dah nie...
far_east far_east 2:48 AM
nape x jd ye??npk cikit trs ilang kat bwh..mcm men kjr2 lak.
malaylifestyle malaylifestyle 7:54 PM
iklan x nk kluar la....knp ye??
AnonymousAnonymous 6:22 PM
kalo nak centerkan, berapa width and paddingnye???
Nor Iman Nor Iman 7:06 PM
Tutorial hebat,da dapat buat,,,thanks.
KHai KHai 9:49 PM
Terima kasih... Info anda benar-benar membantu saya... :)
Khairul Asrol Khairul Asrol 7:10 PM
tak boleh closed ..
다(da)양(yang) 다(da)양(yang) 10:44 PM
thanks ats tutorial. menjadi n mudah d fahami. ^^
Syazrin Rayhan Syazrin Rayhan 3:15 PM
button close tk berfungsi... klik je button close tu, iklan tetap ada kat sana... any solution?
Sha Salleh Sha Salleh 9:50 PM
Nak kena cuba nih. Mudah-mudahan bertambah duit tabung. Hehe. Terima kasih utk info ni.
Sha Salleh Sha Salleh 1:31 AM
Dah cuba tak jadi pon. >.<
dramafullepisodeonline dramafullepisodeonline 12:58 AM
close button tak function, apesal erk..?
Arbaina Nurdin Arbaina Nurdin 12:12 AM
kosong je, iklan nuffnang tak keluar cuma pangkah tu je cmne nak buat erk..