Wednesday, January 26, 2011

Menambahkan Related Post (Artikel Terkait) Pada Halaman Artikel

Sehubungan ada sohib yang subuh-subuh sudah sms nanyain tentang bagaimana cara bikin Related PostRelated Post ini meski baru aja semalam aku curat-coret di blog ini. Ga pa pa kan? Demi sohib dan kamu semua aku rela mati (baca: makan timbel) deh, hehehe...

Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...

Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves. (Artikel Terkait), akhirnya harus nulis juga mengenai

Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
  • Login terlebih dahulu ke akun blogger kamu.
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Kemudian centrang pada Expand Template Widget.
  • Carilah kode <data:post.body/> (gunakan Control F atau F3).
  • Letakkan kode script berikut di bawahnya: 
<!-- Mulai Related Post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'>
<div class='related-posts'>

<div class='widget-content'>
<h4>Artikel terkait dengan kategori ini:</h4>
<div id='datablogku' style='margin:10px 0px 10px 0px'/>

<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;datablogku&#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>
<!-- Terimakasih karena anda tidak menghapus link ini -->
<div style='font-size:85%; float:right; margin-top:3px;'><a href='http://ruangsc.blogspot.com/2009/06/menampilkan-related-post-artikel.html' target='_blank' title='Cara membuat Related Post'>Widget by SC Community</a>
</div></div>
</b:if>
<!-- Akhir Related Post -->

  • Simpan hasil edit kamu dan ucapkan Alhamdulillah....

Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
Selamat mencoba...
Semoga bermanfaat !!!

No comments:

Post a Comment