Membuat Sendiri Banner Iklan Mirip Adsense

Assalamu'alaikum sahabat, semoga sehat selalu dan dimudahkan dalam menjalankan segala aktifitas, aktifitas yang membawa manfaat kebaikan baik untuk kehidupan dunia maupun akhirat, aamiin. Kali ini saya ingin berbagi artikel cara membuat sendiri banner iklan mirip adsense untuk semua sahabat yang membutuhkannya seperti untuk promosi barang jualan ataupun peluang bisnis yang sahabat miliki, banner iklan ini dapat sahabat pasang pada blog yang sahabat miliki dengan menempatkannya sesuai keinginan sahabat. Sebelum sahabat membaca tutorialnya, alangkah baiknya sahabat mencoba untuk klik contoh banner iklan yang saya buat sendiri di bawah agar sahabat tidak penasaran dengan hasilnya hehe, sahabat bisa mencoba klik pada tombol "x" untuk menghilangkan iklan, dan sahabat bisa juga mencoba klik tombol "install" untuk beralih menuju link target yang tertaut pada banner tersebut. Tenang sahabat, ini bukan jebakan iklan adsense kok, yang bilamana sahabat klik saya mendapatkan CPC (Cost Per Click), tapi ini benar-benar murni banner iklan yang saya bikin sendiri sesuai tutorial di bawah.
 

×

Gimana sahabat, setelah mencoba klik banner iklan di atas yang saya buat sendiri, tertarik kah untuk segera membuatnya? Jika tertarik, sekarang silahkan sahabat ikuti tutorial di bawah untuk membuatnya, langkah-langkahnya sangat mudah, disini kita hanya bermain menggunakan tiga tipe code berikut; CSS, HTML & JavaScript. 

Berikut langkah-langkah yang harus sahabat terapkan;

1. Langkah pertama silahkan sahabat salin code CSS di bawah dan tempel code tersebut pada blog yang sahabat miliki di area penempatan code CSS, cara mudah menerapkan code CSS pada blog silahkan sahabat masuk pada pengeditan template dengan cara klik "Template-Sesuaikan-Tingkat Lanjut-Tambahkan CSS", jangan lupa klik "Terapkan Ke Blog".

.alert2 {
    position: relative;
    width: 400px;
    height: 400px;
    color: white;
    overflow: hidden;
}
.alert2.warning2 {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVNSx6wpOpWV-ijPQy7oAFAgkFDhSizrP1LhMzjqbRQ5BxVY1fcMEs9aNaKSpFdN_Vscez9ZxUgS9DpN33boOf8LZMsrcKc1ENZrMY4-JSBaLuKKt0wV1an3i781jkEgjvg_peJimJOZG/s1600/Banner.png");}
.closebtn2 {
    background: #cccccc;
    width: 15px;
    height: 15px;
    text-align: center;
    padding: 1px;
    color: #66b3ff;
    font-family: verdana;
    float: right;
    font-size: 18px;
    line-height: 10px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn2:hover {
    background: #737373;
    color: white;
}
.install {
    position: absolute;
    top: 77%;
    width: 102%;
    text-align: center;
}

2. Langkah kedua silahkan sahabat salin code HTML & JavaScript di bawah dan tempel pada blog sahabat, untuk menempatkan code HTML & JavaScript ini terserah sahabat mau di posisikan di mana asalkan masih pada area penempatan HTML & JavaScript, seperti pada area posting yaitu dengan cara klik "Post-HTML", bisa juga dengan klik "Tata Letak-Tambah Gadget-HTML/JavaScript", jangan lupa klik "Simpan".

<div class="alert2 warning2">
     <span class="closebtn2">×</span>
          <br />
     <div class="install">
          <a href="https://www.paytren.co.id/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ38quI2yNRVchH3feyIK21_Qpw-zkuVGBbcMiP5lsxpxcjxe7jbhlJhVwH2iD5-WPUjyOv0XASLHg9WZgG7NwaoQ75As0asUrkOukEpkS1i0BoU3tZRKJMcP9ZWbl2su_89PN4rppsdy6/s200/download.png" alt="Banner Paytren" title="Install" style="height: 80px; width: 80px;" />
          </a>
     </div>
</div>

<script>
var close = document.getElementsByClassName("closebtn2");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
</script>

Untuk pengeditan seperti background, ukuran, link target dan lain-lain, silahkan sahabat bereksperimen sendiri, saya yakin jika sahabat sudah memiliki dasar pengeditan ketiga tipe code di atas, akan dengan mudah melakukannya.

Ok cukup sekian artikel yang dapat saya tulis, semoga bermanfaat, selamat mencoba dan salam sukses.