Cara buat Iklan Disamping Related Post Blog

Halo sobat blogger, kali ini saya akan membagikan tutorial singkat yang mungkin berguna untuk kalian. Tutorial kali ini saya buat berdasarka...' itemprop='description'/>

Halo sobat blogger, kali ini saya akan membagikan tutorial singkat yang mungkin berguna untuk kalian. Tutorial kali ini saya buat berdasarkan request & sebelumnya mohon maaf bagi yang sudah request namun belum dipublish.


Pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Iklan Disamping Related Post, tutorial ini cukup simple jadi kalian tidak perlu khawatir. Jika kalian sudah menerapkan tutorial ini diblog kalian namun tidak sesuai dengan Gambar diatas silahkan komentar dengan menyediakan link blognya nanti saya bantu. Ok lanjut saja ketutorial berikut.

Cara Membuat Iklan Disamping Related Post

1. Buka Blogger > Template > Edit HTML, lalu ikuti gambar berikut ini

Lihat Gambar 1

Lihat Gambar 2

2. Cari Related Post di template kalian dan hapus, kalian bisa temukan related post di atas atau bawah </article>, lihat gambar

Lihat Gambar 3

Jangan Lupa Hapus CSS & Javascript Related Post-nya

3. Jika Sudah dihapus silahkan kalian simpan HTML berikut tepat di atas </article>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts h4{margin:20px auto 0;font-size:15px;border-bottom:2px solid #333;}
#related-posts h4 span{padding:3px 10px;background:#333;color:#fff;}
#related-posts h4 span:after{float:right;content:&quot;\f097&quot;;font-family:fontawesome;color:#444}
#related-posts ul{list-style: none; margin: 0; max-width: 400px; width: 400px; max-height: 300px;overflow: auto;float: right;}
#related-posts ul li a{padding:4px 10px;background:#555;width:100%;border-left:5px solid #444;border-right:5px solid #444;color:#eee;display:inline-block}
#related-posts ul li{margin:2px auto;}
#related-posts ul li a:hover{color: #FFF;background:tomato;border-color:#d83619;text-decoration:none;}
.iklan{float:left;max-width:300px;max-height:300px;overflow:hidden;margin: 3px 7px;}  
@media screen and (max-width:700px){#related-posts ul{width: 100%;float: none;}.iklan{float:none;margin:10px auto}}
</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<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');}
//]]>
</script>
<div id='related-posts'>
<h4><span>Related post :</span></h4>
<div class='iklan'>
<!-- Isi Iklan -->
<img src='https://s15.postimg.org/rk9cdjfob/banner.jpg'/>
</div>
<!-- End Iklan -->
<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=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

3. Save Template.

Ok sekian tutorial hari ini, untuk tutorial lainnya silahkan cek disini.
Semoga bermanfaat & sampai jumpa ditutorial berikutnya.