Cara Memasang Iklan di Tengah Postingan Tanpa Merusak Tampilan Blockquote dan Gambar

Cara Memasang Iklan di Tengah Postingan Tanpa Merusak Tampilan Blockuqote dan Gambar - Artikel kali ini guna memperbaiki postingan tentang cara memasang iklan Google Adsense di tengah postingan beberapa waktu yang lalu. Sebab pada cara tersebut iklan yang ditampilkan ternyata merusak dan membuat berantakan tampilan gambar dan memotong wilayah <blockquote>, <pre> dan <code> yang biasanya digunakan pada blog tutorial. Selain itu, dengan cara ini iklan juga akan ditampilkan secara otomatis pada setiap postingan, jadi tidak perlu menyematkan script slot iklan di setiap postingan.

Baca juga: Cara Membuat Related Post/Artikel Terkait di Dalam Postingan

Menampilkan iklan di tengah postingan, dipercaya dapat meningkatkan CTR dari iklan tersebut. Terutama bagi pemain Google Adsense, yang juga ternyata memasang dua hingga tiga slot iklan di tengah postingan. Nah, bagi anda yang ingin menampilkan iklan di tengah artikel atau postingan, tanpa perlu merasa takut bahwa iklan tersebut akan merusak tampilan postingan nantinya, terutama penampilan gambar dan blockquote (jika ada) pada postingan tersebut.

Cara mudah menampilkan iklan Google Adsense di tengah postingan, tanpa merusak gambar dan blockquote, pre dan code
Untuk melakukan hal ini, anda dapat mengukuti langkah-langkah berikut ini:

#Langkah 1
Login ke blogger terlebih dahulu, lalu pilih Template > Edit HTML.

#Langkah 2
Cari kode yang seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemprop='description articleBody'><data:post.body/></div>
</b:if>

Setiap template mempunyai struktur yang berbeda, jadi tinggal menyesuaikan saja.

#Langkah 3
Tambahkan kode <div id='middleads'> dan penutupnya </div> diantara kode pada langkah 2. Sehingga hasilnya seperti ini:

<div id='middleads'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemprop='description articleBody'><data:post.body/></div>
</b:if>
</div>

#Langkah 4
Letakkan kode berikut ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#middle-ads{display: none;margin:0 auto;padding:0}
.middleadsproject{padding:0;width:auto;text-align:center;height:auto;margin:5px auto 0;display:block}
.middleadsproject h4{color:#bbb;text-align:center;margin:0 auto 7px;font-weight:normal!important;letter-spacing:1.5px;padding:0;font-size:90%}
</style>
<div id='middle-ads'><div class='middleadsproject'><h4>Advertiser</h4>
KODE IKLAN YANG SUDAH DIPARSE

</div>
</div> <script type='text/javascript'>
var str1=document.getElementById(&quot;middleads&quot;).innerHTML;
var str2=str1.length;
var str3=str2/2;
var substr = str1.substring(str3, str2);
var n = substr.search(&quot;&lt;br&gt;&quot;);
if(n&lt;0)
{
n = substr.indexOf(&#39;.&#39;);
if(n&lt;0)
{
n=0;
}
var firsthalf = str1.substring(0, str3+n+1);
var secondhalf = str1.substring(str3+n+1, str2);
}
else
{
var firsthalf = str1.substring(0, str3+n+4);
var secondhalf = str1.substring(str3+n+4, str2);
}
var addcode=&quot;<center>&quot;+document.getElementById(&quot;middle-ads&quot;).innerHTML+&quot;</center><br/>&quot;;
var newbody=firsthalf+addcode+secondhalf;
var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;);
strnew[0].innerHTML=newbody;
document.getElementById(&quot;middle-ads&quot;).innerHTML=&quot;&quot;;
</script>
  </b:if>

Ganti tulisan KODE IKLAN YANG SUDAH DIPARSE dengan script iklan Adsense anda yang sudah di parse. Lalu simpan template dan lihat hasilnya dengna membuka salah satu postingan di blog anda.