Cara Memasang Iklan Adsense Dan Related Post Di Tengah Postingan Blog Dengan Mudah

Cara memasang artikel terkait/related post dan iklan Adsense berdampingan di tengah postingan - Memasang iklan dan related post/artikel terkait di tengah postingan merupakan salah satu cara untuk meningkatkan jumlah klik iklan dan juga memudahkan pengunjung dalam menemukan artikel blog yang lain sehingga dapat berdampak pada semakin kecilnya nilai bounce rate.

Sebaiknya anda baca dulu : 6 Cara Praktis Menurunkan Bounce Rate dan Membuat Betah Pengunjung Blog

Artikel ini bekerjsama ialah seruan dari salah satu pengunjung yang tertarik untuk memasang related post menyerupai pada blog ini.

Kalau anda baca postingan aku terdahulu mengenai Cara Memasang Iklan In-Article Ads di Tengah Postingan Secara Otomatis (Dibawah Tag Heading h2), maka postingan ini juga sama tetapi aku tambahkan script related post yang menampilkan postingan lain yang masih relevan dengan artikel yang sedang dibaca pengunjung sehingga dengan memasang iklan Adsense dan related post ini anda mempunyai dua laba :

• Jumlah klik iklan anda kemungkinan bertambah
• Pengunjung betah di blog anda dan bounce rate blog kecil

Untuk demonya silahkan lihat pada postingan blog ini

Cara Praktis Memasang Iklan Adsense dan Related Post Berdampingan di Tengah Postingan Blog

Oke, eksklusif saja ikuti langkah-langkah pembuatannya yang aku temukan di blognya Bungfrangki dan sedikit aku modifikasi berikut ini :

Silahkan cari isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Kemudian copy isyarat CSS di bawah ini dan paste di atas isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>
</b:if>

Selanjutnya cari isyarat di bawah ini atau yang menyerupai (kemungkinan masing-masing template dapat berbeda kodenya)

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

Kalau sudah ketemu silahkan anda ganti dengan isyarat di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>

Kemudian tambahkan isyarat berikut ini dibawah isyarat pengganti tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='ads_middle'>
<div class='ads-title'><span>Advertisement</span></div>
<!-- Kode iklan tengah (parse) -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTa6gz9QR0dd6_E6FH7W_mjvO7zrtBtCe_lO7d4qp8PioUwMNu7qX6I9_WTXXTLY8KU2bJeL88qcFZ34xSAPregVwNMAsDtDe5PHaWy6lQ5v9K0A09F8JVV5bAW0j5qyaDpvnYujwPit6/s1600/Advertisement-foot.gif' height='280' width='336' title='ads here' alt='ads here'/>
<!-- Ad code is finished here -->
  </div>
<!-- Related posts inline start -->
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<div class='related-post-by-title' id='related-post-by-title'>
  <span>Baca juga:</span>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts inline end -->
</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var sasaran = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Silahkan klik Preview untuk melihat hasilnya. Jika tidak ditemui kesalahan silahkan klik Save.

Catatan :

• Anda dapat mengatur jumlah postingan yang ingin ditampilkan pada related post dengan mengganti angka 3 yang berwarna kuning.
• Silahkan ganti isyarat gambar di atas dengan isyarat iklan Adsense anda yang sudah diparse

Anda dapat melihat akibatnya dengan membuka salah satu artikel di blog anda. Anda dapat menyesuaikan tampilan yang anda inginkan dengan mengubah isyarat CSS diatas

Demikian cara memasang iklan Adsense dan Related Post di Tengah Postingan pada blog, biar bermanfaat.

Jika ada pertanyaan atau gosip lain terkait bahan artikel ini, silahkan berkomentar di kolom komentar yang tersedia. Terima kasih sudah membaca artikel ini hingga selesai.

Share this post