Print Friendly Version of this page Print this Article Print Friendly Version of this page


Halo Sobat, kali ini saya akan membagikan tutorial "Cara Membuat Iklan Gambar ala Google AdSense" atau bisa di sebut juga "Cara Membuat Iklan Banner ala Google AdSense". (Lihat juga : "Cara Membuat Iklan Teks ala AdSense")
Sebenarnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Tanpa basa basi lagi, mari kita simak tutorialnya di bawah ini...
1. Masuk ke Blogger.
2. Pilih Template -> Edit HTML.
3. Simpan kode CSS di bawah ini di atas ]]></b:skin> atau simpan di dalam tag <style> </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;
}

4. 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 = "http://2.bp.blogspot.com/-y7k4wsVtvaY/U5PP-QaBWJI/AAAAAAAACGM/4ejr0Vp70MY/s1600/DGWAds300x250.gif";
}
if (iklan_gambar == 2) {
    url = "http://www.gamesgw.com";
    alt = "GGW";
    title = "Free Play Games Online | Pusat Permainan Online Gratis";
    gambar = "http://1.bp.blogspot.com/-R9Xu2QxI4P0/U0qAHYGK_-I/AAAAAAAAB4A/nlypFP9r6g0/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="http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/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.
300 (width) : Lebar gambar, ubah sesuai selera.
250 (height) : Tinggi gambar, ubah sesuai selera.



Download Cara Membuat Iklan Gambar ala AdSense

Post a Comment Disqus Blogger

 
Top