PANDUANEKA

Aneka Panduan & Solusi Anda

02 December 2017

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 bisa berdampak pada semakin kecilnya nilai bounce rate.

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

Artikel ini sebenarnya adalah permintaan dari salah satu pengunjung yang tertarik untuk memasang related post seperti pada blog ini.

Kalau anda baca postingan saya terdahulu mengenai Cara Memasang Iklan In-Article Ads di Tengah Postingan Secara Otomatis (Dibawah Tag Heading h2), maka postingan ini juga sama tetapi saya 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 memiliki dua keuntungan :

  • 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 Memasang Iklan Adsense dan Related Post di Tengah Postingan Blog Dengan Mudah

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

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

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

Kemudian copy kode CSS di bawah ini dan paste di atas kode </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 kode di bawah ini atau yang mirip (kemungkinan masing-masing template bisa 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 kode 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 kode berikut ini dibawah kode 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://3.bp.blogspot.com/--44XVvO0bSU/WZlyPHqoFzI/AAAAAAAAC80/hW4_FMgit1EuR50b7BtYMJLqq8I5w1B3QCLcBGAs/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 target = 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 bisa mengatur jumlah postingan yang ingin ditampilkan pada related post dengan mengganti angka 3 yang berwarna kuning.
  • Silahkan ganti kode gambar di atas dengan kode iklan Adsense anda yang sudah diparse

Anda bisa melihat hasilnya dengan membuka salah satu artikel di blog anda. Anda bisa menyesuaikan tampilan yang anda inginkan dengan mengubah kode CSS diatas

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

Jika ada pertanyaan atau informasi lain terkait materi artikel ini, silahkan berkomentar di kolom komentar yang tersedia. Terima kasih sudah membaca artikel ini sampai selesai.

3 comments:

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya