Cara Membuat Iklan AdSense Melayang di Blogger

Pada kesempatan kali ini, saya akan memberitahukan bagaimana cara membuat iklan Adsense berada di posisi asal / tetap melayang saat di Scroll, sehingga kemungkinan besar pengunjung untuk mengklik iklan kita semakin besar. Karena saya tidak suka basa-basi alias langsung saja ke inti masalah dari postingan saya kali ini, langsung saja anda ikuti langkah-langkah di bawa ini, namun sebelum anda memulai, harap untuk memasukkan kode iklan yang anda ambil dari AdSense, jika belum tahu cara mendapatkan kodenya, ikuti langkah berikut :

• Masuk ke Akun AdSense anda, klik disini
• Jika sudah masuk, pilih menu My Ads (Iklan Saya)
• Pilih Ad Units (Unit Iklan)
• Jika sudah, pilih iklan yang anda ingin buat untuk menjadi melayang, dengan pilih Dapatkan kode

Jika sudah memilih dan menyalin kode iklan anda, silakan pilih metode pembuatan Iklan melayang berikut ini

Cara 1  - Jika anda meletakkan Kode Iklan di Tata Letak

Masukan kode Iklan yang sudah andi Tata Letak dengan cara :

• Tambah Gadget
• Pilih HTML/JavaScript
• Pastekan Kode iklan
• Beri Judul (Untuk memudahkan pencarian)
• Simpan

Jika sudah, ikuti langkah berikut

• Masuk ke menu Template (Tema)
• Edit template (Edit tema)
• Tekan CTRL+F kemudian ketikan Judul yang sudah kalian buat, semisal Judulnya Iklan Saya

[<b:widget id='KODEAWAL' locked='false' title='Iklan Saya' type='HTML'>]

• Jika sudah ketemu lihat pada tulisan yang berwarna merah, dan hafalkan, sebagai contoh saya memberi nama KODEAWAL
• Kemudian pastekan kode dibawah ini

[<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#GANTIKODE').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
          $('#GANTIKODE').css({ 'position': 'fixed', 'top':0, 'z-index':600 });
        } else {
            $('#GANTIKODE').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>]

• Ganti tulisan yang berwarna hijau dengan id yang sudah anda hafalkan tadi. sehingga akan menjadi seperti ini,

[<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#KODEAWAL').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
          $('#KODEAWAL').css({ 'position': 'fixed', 'top':0, 'z-index':600 });
        } else {
            $('#KODEAWAL').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>]

• Simpan tema.

Cara 2 - Jika anda meletakkan Kode Iklan di antara postingan / sesuai keinginan

Sebelum memasang di antara postingan / sesuai keinginan harap untuk memparse / merubah kode anda terlebih dahulu disini. Jika sudah selesai memparse kode, silakan ikuti langkah berikut,

• Pilih area yang ingin anda letakkan iklan.
• Buat sebuah bagian seperti berikut ini, dengan membuat id sesuai keinginan anda dan ingat id tersebut, sebagai contoh saya membuat terserah.

[<div id="#TERSERAH">
Letakkan kode iklan disini
</div>]

• Jika sudah, letakkan kode yang sudah di parse tadi di antara bagian tadi
• Kemudian pastekan kode dibawah ini

[<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#GANTIKODE').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
          $('#GANTIKODE').css({ 'position': 'fixed', 'top':0, 'z-index':600 });
        } else {
            $('#GANTIKODE').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>]

• Ganti id yang berwana Hijau dengan id yang sudah kalian buat tadi. Sehingga akan menjadi seperti dibawah ini. 

[<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#TERSERAH').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
          $('#TERSERAH'').css({ 'position': 'fixed', 'top':0, 'z-index':600 });
        } else {
            $('#TERSERAH'').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>]

• Simpan tema

Cukup mudah bukan, sekarang iklan AdSense anda dapat melayang-layang dengan bebasnya di Blog anda.

Seperti contoh iklan yang sudah saya terapkan di Blog saya dalam 2 model.

Versi Mobile

Versi Desktop

Mungkin hanya itu yang bisa saya berikan, semoga bermanfaat untuk kalian semua. Tambahan dari saya, pilihlah iklan yang tidak memakan banyak space saat di jalankan di mode Mobile ataupun Desktop, agar tidak mengganggu isi konten dan kemungkinan besar jika memilih yang memakan banyak space lama kelamaan akun AdSense anda akan di Banned oleh Google.

• Bagikan »

Penulis: Unknown