Latest News

Cara Membuat Banner Yang Bergantian (Rotasi) di Blog

YouTubeMemasang banner di blog pasti sudah banyak yang melakukan. Selain untuk mempercantik dan ‘meramaikan’ blog, banner-banner ini juga dapat memberikan penghasilan tambahan bagi si pemiliknya. Biasanya space untuk menyimpan banner ini hanya menampilkan 1 banner saja seterusnya, bagaimana jika kita ingin merotasi banyak banner dan menampilkan banner yang berbeda-beda setiap kali halaman di load? Ya, kita bisa merotasi banner-banner tersebut dengan menggunakan JavaScript. Contohnya seperti dibawah ini.

Contoh isi script yang digunakan dengan menggunakan 4 banner.

<!-- Begin
rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
var result = Math.ceil(rnd()*number);
if (!result)result++;
return result
};
var ad_cnt1 = 4;
var ad1 = rand(ad_cnt1);
var link1;
var adBanner1;
var width1
var height1
if (ad1==1) {
link1="http://url.klikdana.com/co_cc";
adBanner1="http://lh5.ggpht.com/_AkJDIL5uAFo/S8qwr-HfNTI/AAAAAAAAAoM/VCaH-NxoXwo/cocc468_60a.gif";
width1="468";
height1="60";
alt1="Free Domain CO.CC";
}
if (ad1==2) {
link1="http://url.klikdana.com/music_adv";
adBanner1="http://lh5.ggpht.com/_AkJDIL5uAFo/S8qrw72bViI/AAAAAAAAAng/wLQ0lA_9rm4/freedownloadmp3.gif";
width1="468";
height1="60";
alt1="Free Download MP3";
}
if (ad1==3) {
link1="http://url.klikdana.com/music_adv";
adBanner1="http://lh3.ggpht.com/_AkJDIL5uAFo/S8qrwgPqqYI/AAAAAAAAAnc/BUofh6dT2vM/learn_music.gif";
width1="468";
height1="60";
alt1="Learn Music";
}
if (ad1==4) {
link1="http://url.klikdana.com/aafb";
adBanner1="http://lh3.ggpht.com/_AkJDIL5uAFo/S8qwoUqzpzI/AAAAAAAAAoI/nNed2W_3ZlQ/468x60facebook.gif";
width1="468";
height1="60";
alt1="Facebook Marketing";
}
document.write('<center><a href="' + link1 + '" target="_blank">');
document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>');
document.write('</center>');
// End -->
Keterangan warna:
Merah:Jumlah gambar yang akan dirotasi.
Kuning:Nomor gambar.
Biru:URL tujuan gambar.
Hijau:Lokasi atau alamat gambar.
Oranye:Lebar dan tinggi gambar.
Ungu:Alternatif text gambar.

Gambar yang dirotasi tidak terbatas banyaknya, untuk membuatnya menjadi bahasa JavaScript kita harus menambahkan seperti kode dibawah.

<script type="text/javascript">ISI SCRIPT</script>

Atau bisa juga membuatnya dalam bentuk file javascript yang harus diupload dulu di hosting ripway atau google sites, baru kemudian menambahkan kode berikut:

<script src="http://iklan.klikdana.com/adsense/kd-ads-468x60.js" type="text/javascript"></script>

46 komentar:

Kharianto mengatakan...

Wah mantaf bro,, thanks ya infonya,,,

iBnu mengatakan...

seep nehh
keren dahh

Baka Kelana mengatakan...

Pas banget , gw lagi nyari yang ini

Baka Kelana mengatakan...

Thanks atas widget ini
saya copas dulu ya buat praktek

audy mengatakan...

kayanya pas ni buat blog baru saya ntar...thanks yaah maaas.....ntar kalo lom bisa masangnya boleh nanya2 lagi kaan...

KlikDana mengatakan...

@ Kharianto, iBnu, Baka Kelana: Sama2 mas..
@ audy: wahh,, boleh banget mba..kapan2 kesini lagi aja,,hehe..

N - W - I mengatakan...

Wah Info Keren Nih,....Langsung mau Gw Praktekin...Bos. Makasih Infonya....Sukses SElalu BOS...

Pit-Onta mengatakan...

naruh scriptnya dimana brooo ???

KlikDana mengatakan...

@ N - W - I: Silahkan mas..
@ Pit-Onta: dimana aja bro,, script ini untuk semua ukuran banner,, jadi tergantung sobat mau disimpan dimana..

FaJaR ApRi mengatakan...

bro kalo di simpan di banner header naruhnya dimana??

KlikDana mengatakan...

@ FaJaR ApRi: Tergantung mas fajar make template yang gimana, kalo template saya sekarang ini di dalam EDIT HTML template. Kalo ngelihat template blog mas, di bagian atas yang ada tulisan ini:
* Forum Software ternama, Hacking, n PC Troubleshout
* PTC terbaru,HANDAL,Terbesar dari yang lain
dll..

anawia mengatakan...

bagus blognya, tpo. kunjungi juga blog saya ya yang masih baru belajar. sekalian yang mau backlink gratis, masuk aja.:)
thanks

jirdi mengatakan...

thank atas ilmunya.
buat yang mau tukeran link, silahkan kunjungi lautanlink.blogspot.com , selain tukeran link, link kita pun disebar ke banyak anggotanya.

DEDEN mengatakan...

BOLEH JUGA NI ... MAKASIH SAH NAMBAH ILMU. OYA MAU PASANG BANNER RATIS TAK? DISINI AJA TUKERAN BANNER IKLANBANNERGRATIS.VISIT.WS

ree mengatakan...

sip sip
keren
mampir dong

Fansi mengatakan...

Mas, kalo mo bikin banner yg letaknya ga berubah2, contohnya kayak banner Beswan Djarum di Kaskus (letaknya di atas terus, walaupun page di-scroll), caranya gimana yah?

KlikDana mengatakan...

@ Fansi: untuk membuat banner agar tetap ada walaupun di scroll sampe kebawah halaman,, saya merekomendasikan tutorialnya di http://www.ateonsoft.com/2009/04/cara-membuat-gambar-melayang-di.html
silahkan pelajari disana sob ;)

ayudia mengatakan...

thanks atas infonya yg bagus

Anonim mengatakan...

mas.. klo saya upload fotonya di emageshack trus
Biru:URL tujuan gambar <=linknya yg mana??
Hijau:Lokasi atau alamat gambar <=linkmya yg mana?

KlikDana mengatakan...

arti warna pada script ini
Biru: URL tujuan gambar,
-> maksudnya ini adalah alamat URL yang akan dituju jika gambar di klik..

Hijau: Lokasi atau alamat gambar,
->contohnya: http://img40.imageshack.us/img40/719/343601persiansilvertabb.th.jpg

semoga membantu.....

Tooricg Agfa P.W mengatakan...

Thanks tipsnya bos, gw mw coba juga.... halamannya gw simpen ya.

Lovaree mengatakan...

agak repot ya.. udah dipraktekin, hasilnya malah blank..

Cyber mengatakan...

Salam kenal!
Bos numpang lewat..
http://www.batamcyber.co.cc/2009/09/membuat-banner-tampil-bergantian-alam.html

Toto mengatakan...

duh, kalo yang benar-benar berrotasi gimana...

banner yang satu bergeser ke tempat banner yang lain gitu ...

SUHARJO mengatakan...

bos saya coba gagal
http://suharjo21.blogspot.com/

admin mengatakan...

Ok mas thank's atas infonya .. link balik ...ok

siaranglangsung mengatakan...

nice info sob.. kerenx neh..

http://business-financelg.com/ mengatakan...

ok bro aku coba
kunjung balik ya

olivia mengatakan...

thanks ya... untuk infonya.. lagi usaha buat kayak gini hehe...

ALi M. Top mengatakan...

Trims info tentang cara membuat foto bisa gonta ganti. nich http://muhamadalisaifudin.blogspot.com lagi belajar membuat weblog. alhamdulillah ketemu dengan klikanda.com. trims ilmunya

Basuki, Moh. mengatakan...

maturnuwun sanget infonya Mas :-)

cara mudah dapat dollar gratis mengatakan...

salam kenal, info yang sangt bagus dan menarik, thanks ya atas infonya

musthafirin mengatakan...

maklum anak baru :D cara nambain banner ke my space gimana yah????

KlikDana mengatakan...

@musthafirin: kalo saya kurang ngerti MySpace bro.. maaf ga bisa bantu... tapi kalo masang bannernya di comment, tinggal pakai kode html gambar aja bisa koq...

Belajardesigntshirt mengatakan...

Ini yang saya cari dan langsung dapet...salam kenal untuk semua dari blogger anyar...

pemuda mengatakan...

Nice Info gan.. coba dulu... Thankzz

EzzA mengatakan...

pasangnya di edit HTML apa edit lama+tambah gadget bos?

KlikDana mengatakan...

pasangnya,,,tergantung pemakaian.. tergantung tempat dimana bannernya mau di pasang... dan bisa di mana aja.. kalo mau pasang di edit html,,bagusnya di bikin kedalam file dulu..

jokeprix mengatakan...

wah bingung nih, ane pasang kog gak bisa ya??
terus itu kog ada keterangan di ubah dalam javascript maksudnya mana yg di ubah ya??

KlikDana mengatakan...

@jokeprix: udah ane cek ke blognya,ternyata udah bisa..

Survey Online mengatakan...

dimana nambahin scriptnya???

Eli tea coy mengatakan...

Manteb banget gan ane cari ini udah lama baru ane ktmu di blog ene,,,,thanks

BAMBANG DWI P mengatakan...

ijin sedot gan

Reza Ari mengatakan...

nicee

Gemuda Mudi mengatakan...

cara mengatur waktu tampilannya gimana yah? biar agak cepet muncul gantiannya...?
thanks

Beken.id mengatakan...

Kayanya ini yg pas buat blog ane..

https://beken.id/bikinnyengir