Tutorial Sederhana Cara Bikin Related Posts Di Blogger

Related posts adalah beberapa atau sebuah posting yang berhubungan dengan posting yang kita baca. Link-link dari Related posts di blogger tidak muncul secara otomatis di bawah postingan, maka dari itu kita perlu menambahkan script atau widget ke theme blog kita agar supaya link-link yang berhubungan dengan Related Post bisa muncul secara otomatis di setiap akhir postingan.

Berikut ini Tutorial Sederhana Cara Buat Related Posts Di Blogger, tapi karena kita akan mengedit template sebaiknya Anda membackup dulu template yang digunakan, jadi kalau ada masalah nanti bisa di restore kembali.
Login ke blogger dashboard, di sebelah tulisan View blog klik tanda panah kebawah dan klik Template. Disebelah kanan klik Backup/Restore dan kemudian klik Download full template, Pilih Save File terus Klik OK. Klik Close, Selesai.

Kita mulai dengan cara Pertama:
Klik Edit HTML dan cari kode </head> biar lebih mudah cari dengan menggunakan Ctrl+F,
setelah ketemu, copy dan paste Script dibawah ini dan taruh di atas kode </head>

    <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>

Setelah itu cari kode <data:post.body/> biar lebih mudah cari dengan menggunakan Ctrl+F,
Karena biasanya kode tersebut ada dua, maka cari kode <data:post.body/> yang kedua setelah ketemu, copy dan paste Script dibawah ini dan taruh di bawah kode <data:post.body/>

    <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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <br />
    <br />
    <h4>Related Posts</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

Save template. Selesai. Dibawah ini gambar contoh setelah pakai Script Related Post ini:

Cara yang kedua:  yang ini lebih mudah dari cara yang pertama karena cara yang kedua ini hanya pakai widget. Login ke blogger dashboard, di sebelah tulisan View blog klik tanda panah kebawah dan klik Layout.
Scroll kebawah dan klik Add a Gadget (klik add a gadget yang panjang di atas attribution), klik HTML/JavaScript, Title jangan diisi. Copy dan paste kan Script di bawah ini ke Contentnya, lalu klik Save, Selesai.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

Selain ada Related Posts di setiap postingan Anda, Script di atas juga akan menambahkan daftar postingan terbaru di setiap halaman blog Anda.

Related Posts