Cara Memasang Iklan dan Related Post di Tengah Artikel

Alhamdulillah perut kenyang . . . Hehehe
Selesai sholat ashar langsung beli lauk untuk makan sore + malem, langsung lanjut lagi ngeblog sekalian edit template yang akan saya rilis :D

Kali ini saya akan menerapkan tutorial dari Kompi Ajaib yaitu memasang iklan dan related post di tengah artikel. Jadi saya sambil posting blog sambil edit template, sambil menyelam minum air :D

Oke deh langsung saja ini adalah cara membuat related post dan iklan di tengah artikel.

Tutorial membuat related post dan iklan di tengah artikel.

Pertama silakan kalian buka edit html pada template kalian.

Selanjutnya copy kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body .inline_wrapper{width:100%;height:auto;text-align:center;margin:10px 0;padding:0}
.post-body .inline_wrapper .middle_post{width:50%;display:block;float:right;}
.post-body .inline_wrapper .middle_post span{color:#999;font-size:10px;margin:0 auto 5px;display:block}
.related-post-by-title{width:50%;margin:15px 0;display:block;float:left;position:relative}
.related-post-by-title ul{padding:10px 17px 17px 30px;border:1px solid #ddd;margin:0;text-align:left;}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:15px;font-size:15px;font-weight:700}
.related-post-by-title li {margin-top:10px;line-height:1.2}
.related-post-by-title li a{font-size:14px;font-weight:700;}
.clear{display:block;clear:both}
@media screen and (max-width:640px){.post-body .inline_wrapper .middle_post,.related-post-by-title{width:100%;float:none}
.post-body .inline_wrapper .middle_post{height:300px;}
}
/*]]>*/
</style>
</b:if>

Letakkan kode tersebut diatas kode </head>

Kemudian untuk melanjutkan tutorial memasang iklan dan related post ditengah artikel cari kode ini : <b:includable id='post' var='post'> lalu scroll kebawah dan cari kode seperti dibawah ini ataupun kode yang mirip.

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>

Setelah ketemu maka ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<div class='widget-middle' id='widget-middle'>
  <data:post.body/>
  </div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='middle_post'>
  <span>Advertisement</span>
<!-- kode Iklan letakkan di bawah ini -->

  </div>
<div class='related-post-by-title' id='related-post-by-title'>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;for(document.write("<ul>");t<relatedTitles.length&&4>t;)document.write('<li><a href="'+relatedUrls[e]+'">'+relatedTitles[e]+"</a></li>"),e<relatedTitles.length-1?e++:e=0,t++;document.write("</ul>"),document.write()}var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<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'>
//<![CDATA[
removeRelatedDuplicates(); printRelatedLabels();
//]]>
</script>
</div>
<div class='clear'/>
  </div>
</b:if>

Angka max-result=5 pada script diatas adalah jumlah related post yang akan tampil
Apakah membuat related post dan iklan ditengah artikel sudah selesai sampai disini ?
Tentu saja belum, tinggal satu langkah lagi.

Setelah itu silakan kalian letakkan kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
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('inline_wrapper');var target = document.getElementById('widget-middle');
var opsi1 = target.getElementsByTagName('br');if (opsi1.length > 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName('blockquote');if (opsi2.length > 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName('h2');if (opsi3.length > 0){insertAfter(middleads,opsi3[0]);}
//]]>
</script>
</b:if>

Sekarang silakan letakkan kode tersebut diatas kode </body>

Simpan template dan lihat lah hasilnya.
Dibawah ini adalah tampilan hasil yang saya terapkan

Subscribe to receive free email updates: