February 11, 2013

Cara Membuat Artikel Terkait Pada Postingan Blog

Halo sob....:)

Kali ini saya mau share cara membuat artikel terkait yang akan ditaruh tepat dibawah postingan blog nya temen-temen dengan scroll.

Cara ini sendiri saya pelajari dari Technologie's Blog dan saya coba terapkan pada blog saya dengan sedikit kustomisasi (sangat sedikit,hehehe...)



OK, langsung aja sob kita mulai :

1. Login dulu di blogger.com

2. Pilih Template - Edit HTML.

3. Centang Expand Template Widget dan cari kode <data:post.body/> . Gunakan CTRL+F biar cepet.
4. Letakkan kode berikut dibawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <strong>Baca Artikel Lain :</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:3px solid #ccc;'> <div id='ardi33'/> <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;ardi33&#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> <script type='text/javascript'>RelPost();</script> </div> </b:if>

5. Simpan Template.

Gimana sob?? cukup mudah kan, semoga bermanfaat buat yang sedang belajar nge blog...
Happy blogging sob...:)

24 comments

  1. berkunjung ya..
    ane newbie :shakehand2:

    ReplyDelete
  2. @Randi Andriana: ok sob, terima kasih atas kunjungannya... :shakehand2:

    ReplyDelete
  3. bermabfaat banget....saya akan terapkan pada blog saya...

    ReplyDelete
  4. ga bisa bagaimana sob?? sudah dimasukkan kodenya tapi ga muncul atau kode nya yang dicari ga ketemu???

    ReplyDelete
  5. hmm, maaf mungkin tutor diatas yang kurang sob, coba cari kode <data:post.body/> tersebut ada berapa di template agan, kalo di template saya ada 4, letakkan dibawah kode <data:post.body/> yang terakhir. biasanya kode tersebut lengkapnya seperti ini : <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    ReplyDelete
  6. Salam kenal gan, mampir di blog saya juga ya ^_^

    ReplyDelete
  7. Pernah pasang artikel terkait bergambar, tapi gambarnya hanya X begitu...Padahal di artikel ada gambarnya....

    ReplyDelete
    Replies
    1. kalau saya sendiri lebih suka tanpa thumbnail gan, krn akan bisa memuat lebih banyak related post, sehingga probabilitas dibukanya artikel2 lainnya semakin besar tentunya dengan kondisi artikel tersebut menarik untuk dilihat...

      Delete
  8. good. berguna teman

    http://coppasdot.blogspot.com/2013/04/download-idm-terbaru-615-build-2-final.html

    ReplyDelete
    Replies
    1. terima kasih dan alhamdulillah apabila bermanfaat... ^_^

      Delete
  9. sangat bermanfaat artikel ini..sukron sob.

    elrizki25.blogspot.com

    ReplyDelete
    Replies
    1. terima kasih dan alhamdulillah bila bermanfaat... ^_^

      Delete
  10. Klw agan kok nda ane liat artikel terkaitnya...???

    ReplyDelete
    Replies
    1. karena mayoritas isi dari blog ini adalah mengenai tutorial blog, maka saya tidak gunakan artikel terkait seperti itu, sebagai gantinya saya sudah memberikan menu khusus tutorial blog di bagian sidebar...

      Delete
  11. saya ada tulisan baca artikel lain sama kotaknya tapi ga ada isinya

    ReplyDelete
    Replies
    1. kemungkinan itu karena tidak ada postingan pada label yang sama gan...

      Delete
  12. Tidak semua template ada nya.. :(

    punya saya tidak ada :(

    ReplyDelete
    Replies
    1. apa nya yang tidak ada gan? apa kode <data:post.body/> ?

      Delete
  13. kok di blog saya gak bisa gan?
    mohon penjelasannya.

    ReplyDelete
    Replies
    1. coba letakkan kode tersebut dibawah kode <data:post.body/> yang terakhir, kode lengkapnya kurang lebih seperti ini : <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

      Delete
  14. artikel bagus gan kunjungan balik

    belatiindonesia.blogspot.com

    ReplyDelete
  15. Makasih gan tutorialnya, untuk para newbie termasuk saya... Bagus sekali kang

    ReplyDelete