Cara Memasang Related Post di Dalam Postingan Blog

Cara Memasang Related Post di Dalam Postingan Blog - Hallo sob kembali lagi dengan Fariz sudah lama Fariz tidak berjumpa disini karena yak begitulah :3 . Kali ini Fariz akan memberikan Tutorial Cara Memasang Related Post di Dalam Postingan Blog. Related Post ini muncul secara Otomatis dan secara acak di Postingan blog sobat. Jadi sobat tidak perlu repot repot memasangnya di blog sobat.

Dengan adanya Related Post di dalam postingan pengunjung lebih mudah untuk mengakses post selanjutnya. Related Post ini saya ambil dari IDBLANTER. berikut adalah Cara Memasang Related Post di Dalam Postingan Blog

Cara Memasang Related Post di Dalam Postingan Blog

1. Sobat Login di Blogger dan sobat akan Langsung ke Dashboard blog sobat. Lalu sobat klik dan Cari Menu Template > Edit HTML.
2. Lalu sobat Letakan kode dibawah ini diatas Kode ]]></b:skin> atau </style>.
/*CSS 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}
3.  Selanjutnya sobat cari kode <data:post.body/> (yang kedua atau yang kode yang terakhir) atau <div class='artbody' itemprop='articleBody description'><data:post.body/></div>. 

Sobat hapus kode tersebut dan sobat ganti dengan Kode berikut ini :

<div expr:id='&quot;post1&quot; + 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 == &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 expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<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/3);
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>
Lalu sobat letakan kode dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
Lalu sobat Simpan Template dan Lihat hasilnya. Bagi sobat yang bertanya : apakah ini langsung muncul di postingan blog ? Related Post ini langsung muncul di postingan sobat tanpa harus sobat Atur. Akhir Kata

Sumber : http://www.idblanter.com/2015/12/cara-memasang-related-post-di-dalam-postingan.html

Terima Kasih

11 komentar

Klik Disini Untuk Berkomentar
Unknown
admin
3 January 2016 at 18:34 ×

apa gk ribet ya gan ?? kasihan yang baca nantinya

Reply
avatar
Suhael
admin
3 January 2016 at 18:37 ×

Bagus nih gan untuk blog saya. Nice info.

Reply
avatar
Angger Wiku
admin
3 January 2016 at 18:38 ×

wah, di temlate ane udah bawaan kayak gitu gan

Reply
avatar
Unknown
admin
3 January 2016 at 18:40 ×

wah bagus nih kayaknya :/ tapi ada demonya g gan?

Reply
avatar
Ferdi Style
admin
3 January 2016 at 18:42 ×

ini nanti otomatis atau gmn gan?

Reply
avatar
Unknown
admin
3 January 2016 at 18:54 ×

otomatis gan ,, baca di atas gan sudah saya jelaskan ;)

Reply
avatar
Unknown
admin
4 January 2016 at 16:13 ×

coba ijin pasang ya gan.. thanks infonya..

Reply
avatar
Near
admin
4 January 2016 at 17:03 ×

Ouh jadi kieu caranya :v

Reply
avatar
Anonymous
admin
7 January 2016 at 15:20 ×

demonya mana cog :v saya mau pasang :D

Reply
avatar
Admin Kere
admin
11 January 2016 at 16:32 ×

demo nya share donk sanak :V

Reply
avatar

PERATURAN BERKOMENTAR :
✔ Relevan
✔ Sopan
✖ Link Aktif
✖ Spam
✖ Diluar Topik / OOT !
ConversionConversion EmoticonEmoticon

Terimakasih Atas Komentarmu!