Cara Pasang Related Post 'Baca Juga' dan Iklan di Tengah Posting Blogger Terbaru

Baca Juga

Berikut ini cara memasang Related Post "Baca Juga" dan Iklan/AdSense di Tengah Posting pada template Blogger lama dan Template Blogger Terbaru (Contempo dkk).

Related Post dan Iklan di tengah postingan potensial meningkatkan pageviews dan pendapatan iklan. Situs-situs berita juga mempraktikkan hal ini.

AdSense juga menyediakan unit Iklan dalam Artikel. Iklan dalam artikel adalah format iklan yang dioptimalkan Google yang membantu Anda menempatkan iklan native di antara paragraf halaman Anda.

Cara Pasang Related Post 'Baca Juga' di Tengah Postingan

Kita mulai dari related post di tengah artikel. Nantinya menampilkan tiga tulisan terkait di tengah postinga, seperi di blog CB ini.

Langsung aja ke tutorialnya:

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:view.isPost'>
<style>
.related-middlepost{background:#f1f1f1 none repeat scroll 0 0;margin:30px auto;padding:35px 15px 5px;position:relative;clear:both}
.related-middlepost h4{color:#000;font-size:14px;font-weight:700;left:23px;margin:0;position:absolute;text-transform:uppercase;top:10px}
.related-middlepost ul{margin:0!important;padding:0!important}
.related-middlepost ul li{border-bottom:1px solid #e3e3e3;font-size:13px;font-weight:700;margin:auto;padding:10px 0 10px 10px;position:relative;transition:all 0.3s ease 0s;list-style:disc inside}
.related-middlepost a{color:#444}
.related-middlepost a:hover{color:#48d}
.related-middlepost ul li:nth-child(n+4){display:none}
.related-middlepost ul li:nth-child(3){border-bottom:medium none}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedmiddle = new Array(); var relatedmiddleNum = 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]; relatedmiddle[relatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedmiddleNum] = entry.link[k].href; relatedmiddleNum++; 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] = relatedmiddle[i];}} relatedmiddle = 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((relatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedmiddle[r] + '</a></li>'); if (r < relatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

3. Cari (Ctrl+F) kode <data:post.body/> lalu hapus kode yang kedua dan ganti dengan kode berikut ini.

 <div expr:id='&quot;post1&quot; + data:post.id'/>
      <b:if cond='data:view.isPost'>
            <div class='related-middlepost'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
       </b:if>
<div expr:id='&quot;post2&quot; + data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/1.5);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
</b:if>

Catatan:

• Di template blogger terbaru, kode <data:post.body> ada di bawah kode <b:includable id='postBody' var='post'>
• Dengan kode di atas, Anda juga sudah bisa pasang iklan di tengah postingan dengan posisi di atas related post. Caranya: simpan kode iklan di atas kode <div class='related-middlepost'>

4. Save! Simpan Templte.

Kini related post di tengah postingan harusnya sudah muncul. Coba lagi jika gagal. Cara pasang related post tengah postingan sudah selesai.

Kita kita ke tips berikutnya yaitu cara memasang iklan, termasuk Google AdSense, di tengah artikel.

Cara Pasang Iklan di Tengah Postingan

Berikut ini cara memasang iklan di tengah artikel, sekaligus memasang iklan di atas postingan (di bawah judul) dan setelah tulisan atau di bagian bawah.

1. Pasang Iklan di Tengah Posting Blogger Baru 

Bagi yag menggunakan template Blogger Baru:

1. Klik Tema > Edit HTML
2. Temukan kode berikut ini:

<b:includable id='postBody' var='post'>
  <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
    <data:post.body/>
  </div>
</b:includable>

3. Ganti kode <data:post.body/> dengan kode berikut ini:

<!-- Iklan di Dalam Artikel Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='"atmid" + data:post.id'/>
<div style="clear:both; margin:10px 0;text-align:center">
IKLAN DI TENGAH POSTINGAN
</div>
<div expr:id='"attop" + data:post.id'>
<div style="clear:both; margin:10px 0;text-align:center">
IKLAN DI ATAS POSTINGAN/DI BAWAH JUDUL
</div>
<data:post.body/>
<div style="clear:both; margin:10px 0;text-align:center">
IKLAN DI BAWAH POSTINGAN

</div>
</div>
</b:if>
<script type="text/javascript">
var obj0=document.getElementById("atmid<data:post.id/>");
var obj1=document.getElementById("attop<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>
<!-- Iklan di Dalam Atikel End -->

4. Save. Simpan Template!

2.  Pasang Iklan di Tengah Posting Blogger Lama

Untuk template blogger lama, cukup ganti kode <data:post.body/> yang kedua atau ketiga dengan kode di atas.

Jika hanya ingin memasang iklan di awal dan akhir postingan saja, cukup pasangkan kode iklannya di atas dan di bawah kode <data:post.body/> karena kode <data:post.body/> ini merupakan kode untuk menampilkan postingan atau artikel.

Kode Related Post dan Iklan dalam Artikel Punya CB Blogger

Bagi yang suka intip-intip kode yang digunakan CB Blogger, berikut ini kode related post sekaligus iklan Adsense dalam artikel yang CB gunakan.

Kode CSS:

#custom-ads{float:left;width:100%;opacity:0;visibility:hidden;margin:0}
#before-ad,#after-ad{float:left;width:100%;margin:0}
#before-ad .widget > .widget-title > h3,#after-ad .widget > .widget-title > h3{height:auto;font-size:10px;color:$(meta.color);font-weight:400;line-height:1;text-transform:inherit;margin:0 0 5px}
#before-ad .widget,#after-ad .widget{width:100%;margin:25px 0 0}
#before-ad .widget-content,#after-ad .widget-content{position:relative;width:100%;line-height:1}
#new-before-ad #before-ad,#new-after-ad #after-ad{float:none;display:block;margin:0}
#new-before-ad #before-ad .widget,#new-after-ad #after-ad .widget{margin:0}
.related-middlepost{background:#f1f1f1 none repeat scroll 0 0;margin:30px auto;padding:35px 15px 5px;position:relative;clear:both}
.related-middlepost h4{color:#000;font-size:14px;font-weight:700;left:23px;margin:0;position:absolute;text-transform:uppercase;top:10px}
.related-middlepost ul{margin:0!important;padding:0!important}
.related-middlepost ul li{border-bottom:1px solid #e3e3e3;font-size:13px;font-weight:700;margin:auto;padding:10px 0 10px 10px;position:relative;transition:all 0.3s ease 0s;list-style:disc inside}
.related-middlepost a{color:#444}
.related-middlepost a:hover{color:#48d}
.related-middlepost ul li:nth-child(n+4){display:none}
.related-middlepost ul li:nth-child(3){border-bottom:medium none}

Kode Layout

body#layout #custom-ads{display:block!important;display:flex!important}
body#layout #custom-ads .section{width:50%}
body#layout #main-before-ad > h4:after{content:' - Before Post Content'}
body#layout #main-after-ad > h4:after{content:' - After Post Content'}

Kode HTML/JS

            <b:includable id='postBody' var='post'>
              <!-- Ads before post content, if post page. -->
              <b:if cond='data:view.isPost'><div id='before-ad'/></b:if>
              <!-- Post Body Entry Content-->
              <div class='post-body entry-content' id='post-body'>
                <div expr:id='&quot;post1&quot; + data:post.id'/>
<b:if cond='data:view.isPost'>
<div class='related-middlepost'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div style='margin:20px 0'>
<center>
<!--IKLAN TENGAH POSTINGAN -->
</center>
</div>
                </b:if>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/1.5);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
                </b:if>
              </div>
              <!-- Ads after post content, if post page. -->
              <b:if cond='data:view.isPost'><div id='after-ad'/></b:if>
            </b:includable>

Kode JS:

<b:if cond='data:view.isPost'
<script type='text/javascript'>
//<![CDATA[
var relatedmiddle = new Array(); var relatedmiddleNum = 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]; relatedmiddle[relatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedmiddleNum] = entry.link[k].href; relatedmiddleNum++; 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] = relatedmiddle[i];}} relatedmiddle = 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((relatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedmiddle[r] + '</a></li>'); if (r < relatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

Kode XML (Before </main>)

        <div class='clearfix'/>
        <div id='custom-ads'>
          <b:section cond='data:view.isPost' id='main-before-ad' maxwidgets='1' name='ADS 1' showaddelement='yes'/>
          <b:section cond='data:view.isPost' id='main-after-ad' maxwidgets='1' name='ADS 2' showaddelement='yes'/>
        </div>

Kode JS untuk Menampilkan Widget di Layout

<script type='text/javascript'>
  //<![CDATA[
$('#post-body').shortcode({ads:function(){if(this.options!=undefined){var i=this.options.id;switch(i){case'ads1':return'<div id="new-before-ad"/>';break;case'ads2':return'<div id="new-after-ad"/>';break;default:return'';break}}}});$('#new-before-ad').each(function(){var $t=$(this);if($t.length){$('#before-ad').appendTo($t)}});$('#new-after-ad').each(function(){var $t=$(this);if($t.length){$('#after-ad').appendTo($t)}});$('#main-before-ad .widget').each(function(){var $t=$(this);if($t.length){$t.appendTo($('#before-ad'))}});$('#main-after-ad .widget').each(function(){var $t=$(this);if($t.length){$t.appendTo($('#after-ad'))}});
  //]]>
</script>

Demikian Cara Pasang Related Post 'Baca Juga' dan Iklan di Tengah Posting Blogger Terbaru. Good Luck & Happy Bloggin! (www.contohblog.com).*