Aug 18, 2017

Cara Pasang Related Post dan Iklan di Tengah Postingan Blogger

Pasang Related Post dan iklan di tengah postingan Blogger

Seperti yang kita ketahui dan pernah bahas sebelumnya bahwa salah satu faktor peningkatan CTR pada Adsense adalah dari cara penempatan Iklan yang dipasang dalam Blog yang dikelola. Menurut pengalaman saya sampai saat salah satu faktor peningkatan penghasilan Adsense adalah tergantung dari cara penempatan iklan yaitu iklan dipasang di tengah postingan seperti yang saya lakukan pada blog ini. 

Pemasangan Iklan Adsense ditengah postingan pernah saya bahas sebelumnya pada postingan yang berjudul Cara Memasang Iklan Adsense di Tengah Postingan, di postingan tersebut dibahas cara mudah memasang iklan adsense ditengah postingan blog. Nah terkait hal ini disini kita saya updated dari postingan sebelumnya yaitu cara mudah memasang iklan adsense ditengah postingan blog akan ditambahkan dengan pemasangan Related Post atau artikel terkait juga ditengah postingan yang tujuannya akan meningkatkan minat lebih lama pengunjung untuk betah lama di blog kita. Kalau pengunjung sudah betah otomatis akan menurunkan bouce rate dan menaikkan ctr blog.

Nah bagi sobat yang mau mencoba memasangnya mari ikuti langkah berikut ini Cara Pasang Related Post dan Iklan di Tengah Postingan Blogger.  

Langkah Pertama
Silahkan salin kode dibawah ini lalu letakkan di atas kode </head>.

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


Langkah Ke Dua
Silahkan sobat cari kode ini atau mirip seperti dibawah ini.


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

Setelah ketemu silahkan sobat ganti dengan kode dibawah 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>


Langkah Ke Tiga
Silahkan salin kode dibawah ini lalu letakkan tepat di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Baca juga:</h4>
<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=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts inline -->
</div>
<div class='ads_middle'> <!-- ADS MIDDLE POST -->
  <span>Advertisement</span>
// kode Iklan yang sudah diparse
  </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>

Perhatikan kode yang ditandai 5 silahkan sobat sesuaikan jumlah artikel yang akan ditampilkan, dan perhatikan juga langkah penerapan kodenya jika sudah selesai silahkan SAVE. Selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.