Cara Memasang Related Post di Dalam Postingan Blog
29 December 2015
Tutorial Blog kali ini yaitu Cara Memasang Related Post di Dalam Postingan Blog, Related Post ini akan muncul secara acak dan otomatis pada tulisan-tulisan di dalam postingan, jadi tidak perlu repot untuk mengubah letaknya di editor postingan.
Dengan adanya related post di dalam postingan ini pengunjung akan lebih mudah untuk mengakses post selanjutnya atau post lainnya. Related Post di dalam postingan ini juga cocok untuk para publisher adsense.
Baca Juga : Cara Membuat Tweet Box Di Postingan Blogger
Related Post seperti ini saya dapatkan dari BungFrangki dan stylenya saya dapatkan dari Indzign, dan bagi sobat yang sering berkunjung ke website JalanTikus pasti tidak asing lagi dengan widget related post yang seperti ini.
Berikut Tutorial Cara Memasang Related Post di Dalam Postingan Blog :
Buka Blogger > Template > Edit HTML > Letakan kode di bawah ini tepat di atas kode
]]></b:skin> atau </style>/*RelatedPost*/
.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline}
Selanjutnya cari kode
<data:post.body/> (yang kedua) atau <div class='artbody' itemprop='articleBody description'><data:post.body/></div>
Hapus kode tersebut dan ganti dengan kode di bawah ini:
<div expr:id='"post1" + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<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=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Lalu letakan kode di bawah ini tepat di atas kode
</head><b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
Simpan Template dan Lihat Hasilnya...
Source: http://www.bungfrangki.com/2015/12/membuat-related-pos-dalam-postingan.htmlSemoga Tutorial Cara Memasang Related Post di Dalam Postingan ini bermanfaat. Terimakasih.