March 05, 2009

32

Membuat Related Post /Posting Terkait

Posted in , ,
Kemarin aku bikin/nambahin 'related post' di blogku ini.. Jadi itung-itung majang judul postingan lain dalam kategori/label yang sama dengan postingan yang sedang dibaca.. Sekalian jadi ajang promosi postingan2 baheula yang mungkin sudah nyaris terlupakan..

Aku ngambil tutorialnya dari blognya mas wawan nih.. Matur nuwun nggih mas..

  • 1. Login di Blogger.
  • 2. Klik Layout>>Edit HTML.
  • 3. Centang 'Expand Widget Template'.
  • 4. Cari kode <p><data:post.body/></p>.
  • 5. Tambahkan kode di bawah ini tepat di bawah kode <p><data:post.body/></p> tadi.
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</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>
  • 6. Save Template.

-- Tulisan Related Post bisa diganti dengan 'artikel terkait', 'post terkait' atau apa aja terserah deh..
-- 'Max number posts per label' dan 'Max number of labels' bisa diganti jumlah postingan yg diinginkan.
Share on :

32 comments:

  1. wah... ini to yang bikin blog mbak Tyas yang satunya ada sesuatu yang baru hehehe...

    bikin tutorial TAG cloud mbak... yang kemarin aku tanyain... biar aku gak mumet2 nyari hehe... kodeku ilang neh...

    ReplyDelete
  2. ooo gitu ya carane... jadi postingan dengan label yang sama gitu ya..

    sip sip...bole juga di praktekin

    ReplyDelete
  3. kerennnn.....mb tyas beraksi

    ReplyDelete
  4. mbake kie sll ada yg br..updet terus euy

    ReplyDelete
  5. lha itu ga tabrakan dengan code nya read more kan mbak? soalnya kan read more juga ditaruh di bawah < p >< data : post.body / > < / p > persis

    ReplyDelete
  6. @diary pink: iya lyl, aku nyoba buat disini sama blog satunya..
    @milla: monggo dicoba Mill..
    @tips kecantikan: beraksi opo to An? wong mung nyonto..
    @girls corner: ini krn nggak ada bahan postingan jye..
    @ipanks: kalo aku sih kutaro di atasnya kodenya 'read more', panks..

    ReplyDelete
  7. wah udah jadi tutorial sekarang :D

    waduh PRnya ...heheheh

    nti saya kasih backlink mbakeee...tenang ajeee...wkwkwkwk

    ReplyDelete
  8. bisa keramean kalo saya juga pake ini diblog saya..
    tapi sip dah tutorialnya...
    hehehe

    ReplyDelete
  9. seep neh, disimpen dulu deh mbak, abis ga punya blog blogspot :D

    mantep mbak, bikin lagi posting2 tutorial macem gini

    ReplyDelete
  10. saya lagi cari widget tulisan teratas yang ada jumlah komentar seperti punya wordpress.kalao nemu tolong di bagi ya :)

    ReplyDelete
  11. mbake udah saya kirim backlink atu kesini...heheheh...iseng komenk, klo tutorial ra mudeng...heheheh

    ReplyDelete
  12. very interesting post :)

    ReplyDelete
  13. ntar aku praktekin deehh..belum punya soalnya he he..

    ReplyDelete
  14. sip langsung di praktekin nih

    ReplyDelete
  15. salam kenal dulu
    byme http://insitelink.com

    ReplyDelete
  16. ada cari yg lebih simpel nih mba, di blognya mintblogger wkt itu aku baca. cuma make 3 baris kode ( walo ttp menggunakan js )

    ReplyDelete
  17. Cari di Google, Untung ketemu mb Tyas...

    ReplyDelete
  18. oke udah bisa!!

    ReplyDelete
  19. ini ni yang dicati, tapi jadi nambah berat blog gax??

    ReplyDelete
  20. siip tutorialnya..makasih ya

    ReplyDelete
  21. thanks bangat dengan tutorial ini. udah jadi dong di blog aku^^

    ReplyDelete
  22. After I read your blog, I think it's very useful information.
    I'm very delighted to invite you to Stop Dreaming Start Action and Stop Dreaming Start Action

    Warm Regards

    yuliantoro

    ReplyDelete
  23. mbak ijin copas ya scriptnya... thanks.. lam kenal

    ReplyDelete
  24. Wih hebat tyas nih.... Jadi jago banget lama tak mampir...

    ReplyDelete
  25. makasih banget nih mbak masih ada cara2 nambahin sidebar blog, maklum baru blajar dan kenal blog

    ReplyDelete
  26. Selama ini aku kalau buat related post hanya pake link biasa aja pada tiap posting, jadi saya buat manual. Thanks ya sarannya

    ReplyDelete
  27. Bagus banget tutorial Anda. terimakasih.

    ReplyDelete
  28. Akhirnya dapat juga artikel ini, thx yach..

    ReplyDelete
  29. Sudah bisa mbak diterapkan di blog saya, matur nuwun tutorialnya. Salam.

    ReplyDelete
  30. boleh juga tu triknya ....

    ReplyDelete
  31. AnonymousJuly 17, 2010

    terima kasih mbak, sangat membantu infonya :)

    ReplyDelete