Tutorial Membuat Related Post atau Artikel Berhubungan di Blogger

Jika kita berkunjung ke salah satu halaman blog sahabat (blog-walking), disana mungkin pernah kita jumpai istilah Related Post atau artikel yang berhubungan dengan tema yang sedang kita baca. Related Post merupakan pengelompokan judul artikel yang sesuai dengan tema bahasan atau topik yang sedang ditampilkan atau dibaca. Bagi seorang pembaca, fungsi widget ini sangat berguna dalam menemukan informasi yang lebih lengkap dalam sebuah blog. Anda mempunya sebuah blog? Mengapa tidak untuk mencoba yang satu ini.

Untuk blog ber-platform wordpress seperti yang saya miliki di ari-sty.co.cc, tersedia banyak plugin siap pakai yang bisa andagunakan dan  download di wordpress.org. Lalu bagaimana dengan pengguna blog di blogger atau blogspot.com agar dapat menampilkan Related Post di dalam halaman blognya?

Lihat contoh: Live Demo

Di dalam tutorial ini saya akan menjelaskan pemasangan widget Related Post untuk blog dengan platform Blogger atau blogspot.com dimana disana belum tersedia widget standardnya. Baiklah kita mulai saja proses pembuatanya:

1. Yang harus anda lakukan pertama tentu saja adalah login ke dalam akun blog anda di blogger.com.
2. Buka Layout atau Tata-Letak
3. Pilih Edit HTML agar kode HTML blog ditampilkan
4. Beri tanda centang pada Expand Template Widget untuk melihat kode blog secara keseluruhan
5. Cari kode berikut: <data:post.body/>
6. Jika sudah ketemu, copy dan paste kode berikut dibawah kode diatas. Simpan/Save dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
        <div class='widget-content'>
        <h3>Related Posts by Categories</h3>
        <div id='data2007'/><br/><br/> 
            <script type='text/javascript'>

            var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
            var maxNumberOfPostsPerLabel = 4;
            var maxNumberOfLabels = 10;

            maxNumberOfPostsPerLabel = 100;
            maxNumberOfLabels = 3;

            function listEntries10(json) {
              var ul = document.createElement(&#39;ul&#39;);
              var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                             json.feed.entry.length : maxNumberOfPostsPerLabel;
              for (var i = 0; i &lt; maxPosts; i++) {
                var entry = json.feed.entry[i];
                var alturl;

                for (var k = 0; k &lt; entry.link.length; k++) {
                  if (entry.link[k].rel == &#39;alternate&#39;) {
                    alturl = entry.link[k].href;
                    break;
                  }
                }
                var li = document.createElement(&#39;li&#39;);
                var a = document.createElement(&#39;a&#39;);
                a.href = alturl;

                if(a.href!=location.href) {
                    var txt = document.createTextNode(entry.title.$t);   
                    a.appendChild(txt);
                    li.appendChild(a);
                    ul.appendChild(li);   
                }
              }
              for (var l = 0; l &lt; json.feed.link.length; l++) {
                if (json.feed.link[l].rel == &#39;alternate&#39;) {
                  var raw = json.feed.link[l].href;
                  var label = raw.substr(homeUrl3.length+13);
                  var k;
                  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                  var txt = document.createTextNode(label);
                  var h = document.createElement(&#39;b&#39;);
                  h.appendChild(txt);
                  var div1 = document.createElement(&#39;div&#39;);
                   div1.appendChild(h);
                  div1.appendChild(ul);
                  document.getElementById(&#39;data2007&#39;).appendChild(div1);
                }
              }
            }
            function search10(query, label) {

            var script = document.createElement(&#39;script&#39;);
            script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
             + label +
            &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
            script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
            document.documentElement.firstChild.appendChild(script);
            }

            var labelArray = new Array();
            var numLabel = 0;

            <b:loop values='data:posts' var='post'>
              <b:loop values='data:post.labels' var='label'>
                textLabel = &quot;<data:label.name/>&quot;;
                var test = 0;
                for (var i = 0; i &lt; labelArray.length; i++)
                if (labelArray[i] == textLabel) test = 1;
                if (test == 0) {
                   labelArray.push(textLabel);
                   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
                          labelArray.length : maxNumberOfLabels;
                   if (numLabel &lt; maxLabels) {
                      search10(homeUrl3, textLabel);
                      numLabel++;
                   }
                }
              </b:loop>
            </b:loop>
            </script>
        </div>

    </div>
</b:if>

Untuk merubah judul Related Post, cari <h3>Related Posts by Categories</h3> dan ganti sesuai keinginan anda. Misal <h3>Artikel yg Berhubungan</h3>.

Sekian dan terima kasih, anda telah membaca artikel saya di www.ari-sty.cz.cc (blogger platform)