7/20/2017

Cara Menyembunyikan Gambar dan Menggantinya Dengan Iklan

Ibu Sartika
Assalamualaikum, selamat jam segini. Dalam kesempatan kali ini kami akan membagikan sebuah tips mengenai cara menyembunyikan gambar di halaman postingan kemudian menggantinya dengan unit iklan AdSense memanfaatkan library JavaScript bernama JQuery.

Tips ini kami bagikan dengan tujuan berbagi pengalaman dan pengetahuan, sehingga menjadi sesuatu yang bermanfaat untuk kita semua dalam jangka panjang.

Sebelum membahas lebih lanjut, kami ingin menjelaskan sedikit gambaran mengenai trik ini. Maksud menyembunyikan gambar dalam postingan ini adalah menyembunyi salah satu atau semua gambar yang ada di area item Blogger, atau kita sering menyebutnya area postingan dimana artikel utama dibaca oleh pengunjung, kemudian lokasi gambar yang "menghilang" tersebut diisi dengan unit iklan AdSense.
Cara Menyembunyikan Gambar di Postingan dan Menggantinya Dengan Iklan
Tips ini sudah kami aplikasikan di beberapa blog berbahasa asing yang kami kelola, dan alhamdulillah hasilnya pun diluar dugaan.

Dan berikut ini adalah tahapan untuk menempatkan unit iklan AdSense di posisi gambar yang disembunyikan.

Note : Pastikan template blog anda memiliki library JQuery, mengenai versinya tidak jadi masalah.

A. Untuk menyembunyikan gambar yang ada di dalam postingan

A.1. Untuk menyembunyikan semua gambar dalam postingan

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post-body img{visibility:hidden!important}
</style>
</b:if>

A.2. Untuk menyembunyikan gambar tertentu dalam postingan

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post-body img:eq(x){visibility:hidden!important}
</style>
</b:if>
Harap ganti X dengan angka (lihat snippet yang kami tandai dengan warna merah bata), misalnya ingin menyembunyikan gambar pertama, maka x diganti dengan 0 :

Menyembunyikan gambar pertama, x di isi dengan 0
Menyembunyikan gambar kedua, x di isi dengan 1
Menyembunyikan gambar ketiga, x di isi dengan 2
Menyembunyikan gambar keempat, x di isi dengan 3

Harap perhatikan juga bahwa ID atau class gambar yang ada di postingan bisa berbeda, silahkan lakukan Inspect Element pada template yang anda gunakan, tapi biasanya gambar pada postingan memiliki class .post-body img.

B. Untuk mengisi/mengganti gambar dengan unit iklan AdSense

Buat atau gunakan sebuah unit iklan AdSense, bungkus dalam sebuah elemen <div> kemudian beri class atau ID sesuai keinginan anda, lalu tempatkan di atas </body>, contoh (ganti ID publisher dan ID slot iklan dengan kode AdSense milik anda):
<b:if cond='data:blog.pageType == "item"'>
<div class='iklan_sisipan'>
<!--Kode Iklan AdSense bisa menggunakan yang responsive maupun non responsive. Dalam contoh ini kami menggunakan unit iklan responsive-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block;min-height:10px;max-height:100px"
     data-ad-client="ca-pub-1234567891011"
     data-ad-slot="987654321"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</b:if>

Terakhir, simpan kode berikut ini di bawah kode iklan AdSense yang dibuat sebelumnya.

B.1. Untuk menyisipkan iklan di semua lokasi gambar yang sudah disembunyikan

<script type='text/javascript'>
$(".iklan_sisipan").insertAfter(".post-body img");
</script>

B.2. Untuk menyisipkan iklan di lokasi gambar pertama yang sudah disembunyikan

<script type='text/javascript'>
$(".iklan_sisipan").insertAfter(".post-body img:eq(0)");
</script>

B.3. Untuk menyisipkan iklan di lokasi gambar kedua (jika postingan memiliki lebih dari 1 gambar) yang sudah disembunyikan

<script type='text/javascript'>
$(".iklan_sisipan").insertAfter(".post-body img:eq(1)");
</script>

Untuk menempatkan di lokasi yang lain, silahkan ganti nilai x pada .post-body img(x) dengan nilai yang anda inginkan.

Note : Kami menyarankan anda menyimpan kode unit iklan di lokasi gambar pertama, hal ini untuk mengatasi kesalahan jika postingan anda tidak menyisipkan gambar sama sekali.

Demikian tips dari kami mengenai cara menyembunyikan gambar postingan dan menggantinya dengan unit iklan AdSense, semoga bermanfaat dan selamat mempraktekkannya.

Terima kasih atas atensi dan kunjungan anda, sampai berjumpa kembali di kesempatan yang lain.