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 ;  5 Cara Terbaik Membuat Pengunjung Berlama-lama di Blog)

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.

Bagaimana caranya melakukannya?

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:
  (Baca ;  Cara Memasang Iklan dan Related Post di Tengah Postingan )

#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.

  (Baca ;  Cara Menambahkan In-Feed Ads Di Tengah "Post Popular" )

#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>

 (Baca ; Cara Membuat Iklan Melayang di Bawah Blog Dengan Tombol Close Dan Responsive )

Gantii 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. Sumber Bungfangkri.com

 

Baca juga: