Cara Menampilkan Iklan Bergantian Otomatis

Menampilkan banner iklan bergantian secara otomatis di blog 

Kali ini saya akan berbagi bagaimana caranya menampilkan beberapa iklan dalam satu widget html, di mana fungsinya sangat positif untuk menghemat wadah untuk beriklan, oke langsung saja ya, praktekan toturial di bawah ini, di sini juga saya tampilkan iklan yang sudah jadi.

1. Tampilan Iklan Slide Pertama 

 

 2. Tampilan Iklan Slide kedua

 

 3. Tampilan Iklan Slide ke tiga

 

 

 

5. Tampilan Iklan Slide ke empat

Mempercantik blog supaya terlihat lebih rapi ataupun simple istu sudah menjadi harapan bagi pembloger, terlebihnya jika mempunyai banner iklan yang banyak terlihat tidak rapi sehingga mungkin diperlukan solusinya seperti membuat widget tempat iklan yang tampil bergiliran secara otomatis. Nah berikut saya berikan tutorial membuat tempat iklan yang berfungsi menampilkan banner iklan bergiliran secara otomatis.

Langsung saja login ke blog anda

Pilih Tata Letak> Tambah gadget > Html/ Javascript

Copy pastekan kode dibawah ini

<script type="text/javascript">
var imgs1 = new Array("#","#","#","#");
var lnks1 = new Array("#","#","#","#");
var alt1 = new Array("#","#","#","#");
var currentAd1 = 0;
var imgCt1 = 4;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",20000);
</script>
<a href=""link iklan-1"" id="adLink1" target="_blank">
<img src="link gambar iklan-1" id="adBanner1" border="0" width="300" height="250" /></a>

Kemudian simpan.

NB:

• Untuk kode yang berwarna merah ganti # dengan Url gambar, Url link yang dituju dan text yang anda inginkan.

• Angka yang berwarna biru silahkan ganti ukuran gambar yang anda inginkan. 

seperti yang di hasilkan di bawah ini

<script type="text/javascript">
var imgs1 = new Array("https://id-test-11.slatic.net/shop/839f9153ab998b00b32ddd34ffecad3b.png","https://id-test-11.slatic.net/shop/f23d812f684b1590828a8b1c82a1117d.jpeg","https://id-test-11.slatic.net/shop/30a2f1a1cdd6efb22b6f12b9e91f5546.png","https://id-test-11.slatic.net/shop/bb828712a6912adf628f9ab01ef29c39.png");
var lnks1 = new Array("https://c.lazada.co.id/t/c.0EKDfr","https://c.lazada.co.id/t/c.0EnfKS","https://c.lazada.co.id/t/c.0EKtgz","https://c.lazada.co.id/t/c.0Eq3xs");
var alt1 = new Array("Youras Collection","ardiyansah collection","MoryMoshi","TCL");
var currentAd1 = 0;
var imgCt1 = 4;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",20000);
</script>
<a href=""link iklan-1"" id="adLink1" target="_blank">
<img src="link gambar iklan-1" id="adBanner1" border="0" width="300" height="250" /></a>

 

Selamat mencoba..

 

 

Baca Juga :

1. Cara Membuat Banner Iklan Melayang di Kanan dan Kiri Blog - New !!  
2. Cara Membuat Iklan Melayang di Blog - New !!
3. Cara Membuat Iklan di Facebook - New !!
4. Cara Menambahkan gambar & video ke blog
5. Cara Menambahkan halaman ke blog