Membuat Iklan Gambar Ala AdSense

Selamat siang, kali ini saya share tutorial Membuat Iklan Gambar Ala AdSense atau bisa disebut juga Membuat Iklan Banner Ala Google AdSense. (lihat juga : "Cara Membuat Iklan Teks Ala Google AdSense").
Sebenarnya ini hanya manipulasi CSS dan sedikit bumbu JQuery saja.

Simak tutorial di bawah ini:

1. Login akun blogger Anda.
2. Klik Template  Edit HTML.
3. Kemudian Tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Simpan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

#iklan-gambar {
  width:300px;
  height:250px;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
.icon-gambar {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-gambar {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

5. Simpan kode di bawah ini pada widget HTML/JavaScript.

<div id="iklan-gambar">
<script type="text/javascript">
var jumlah = 3;
var tanggal = new Date()
var waktu = tanggal.getSeconds()
var iklan_gambar = waktu % jumlah;
iklan_gambar += 1;
if (iklan_gambar == 1) {
    url = "http://www.downloadgw.com";
    alt = "DGW";
    title = "Ngapain Bayar? Kalau Bisa Download Gratis!";
    gambar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvmeGz04u1qVIbMii6bZv8bxwINFkkoxeeeufy9T2diKcbTK0f3TdBoL5K9GWFKjCWnqpbkfsqzAi-wvW8PWl8FWLWS3WPczT-HwPBueWJ9gw9uFx9sG985GiL9-9Zn6hek50h97NN60/s1600/DGWAds300x250.gif";
}
if (iklan_gambar == 2) {
    url = "http://www.gamesgw.com";
    alt = "GGW";
    title = "Free Play Games Online | Pusat Permainan Online Gratis";
    gambar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmIFlOGMJ36JqH6YLnSooq507akdvLfai1nc0an9xAmP-u9d378ttaRt2xA5LSl2jbXGQiehEh7iwnOmPG5QaOH8QXaTcDr_CkZPTIQwutShDMJaS2v7XmXuyy_bnpiF1KM5LN7yC88gAo/s1600/GGWAds.gif";
}
if (iklan_gambar == 3) {
    url = "https://shorte.st/ref/1c64cecc05";
    alt = "Shorte";
    title = "Earn Money, Please Click Here!";
    gambar = "https://static.shorte.st/bundles/smeuser/img/referral_banners/300x250.png";
}
document.write('<a href=\"' + url + '\" target=\"_blank\" rel=\"nofollow\">');
document.write('<img src=\"' + gambar + '\" height="250" width="300"');
document.write('title=\"' + title + '\" alt=\"' + alt + '\"></a>');
$(document).ready(function() {
    $('.icon-gambar').hover(function() {
        $('.info-gambar').toggle();
    });
});
</script>
<!-- info -->
<span class="info-gambar">Iklan oleh Mahogra Fauzan</span>
<span class="icon-gambar"><a href="http://linkgw.tk/gambar" target="_blank"><img alt="info" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mgtT9qfGztzlNvKWsND5Pymc4wNUWXt-TPlpYdOzUjwUTWEJsCKU4vV3vhzTwjq713Fr6Lum5QmRNfw0X9x5bgSV8r9-i690G8pDTNAW6BVFLSBulj7MgXM8qjF-iCJS7Qyqfw64lKM/s1600/info-iklan.png"/></a></span>
</div>

Keterangan:

url : Silahkan ganti dengan url tujuan iklan.
alt : Silahkan tulis keterangan gambar.
title : Silahkan tulis judul gambar.
gambar : Silahkan ganti dengan url gambar.
250 (height) : Tinggi gambar, ubah sesuai selera.
300 (width) : Lebar gambar, ubah sesuai selera.

Selamat mencoba dan semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250