Halo semua, pada artikel saya kali ini saya akan membahas tentang Tutorial Cara Membuat Iklan Disamping Related Post yang akan membantu sobat blogger untuk menambah daya tariknya tersendiri
Yuk, simak langsung saja di bawah ini.
Baca juga :
- Tutorial Cara Membuat Widget Recent Post Style Disc by Label
- Arti Kesalahan Dari Kode Beep pada AMI BIOS, Award BIOS, IBM BIOS, Phoenix BIOS Secara Lengkap
- Alat dan Cara Memasang Parse Kode Script, Html, Css dan lain-lain Valid HTML5 di Blog
Tutorial Cara Membuat Iklan Disamping Related Post
Langsung saja ikuti langkah - langkah dibawah ini:
Cara Membuat Iklan Disamping Related Post
1. Pertama - tama buka Blogger > Template > Edit HTML, kemudian ikuti saja gambar berikut dibawah ini.
lalu,
Jangan Lupa Hapus CSS & Javascript Related Post-nya
3. Jika Sudah dihapus kemudian simpan HTML berikut ini tepat di atas kode </article>
<b:if cond='data:blog.pageType == "item"'>
<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:"\f097";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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>3. Save Template.
Sekian artikel saya Kali ini tentang Tutorial Cara Membuat Iklan Disamping Related Post.
Terima kasih sudah mampir & semoga bermanfaat
Tunggu Artikel Kami Berikutnya
Jangan Lupa Komentarnya.
EmoticonEmoticon