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 Memasang Iklan di Tengah Postingan Tanpa Merusak Tampilan Blockqote dan Gambar

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.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.