Thursday, January 15, 2009

Related Article

Seri tutorial kali ini akan membahas bagaimana membuat Related Article atau Related Post atau dalam bahasa Indonesianya disebut sebagai Artikel Terkait, biasanya kita temukan di bawah dari Artikel yang ditulis dimana hal ini menandakan bahwa Artikel ini memiliki keterkaitan antar artikel yang lainnya.

Related Article ini sangat berguna terutama untuk memudahkan pembaca blog untuk mengetahui tulisan-tulisan terkait atau yang berhubungan dengan tulisan yang baru dibaca, sebenarnya cara kerja dari Artikel-artikel yang dikaitkan ini adalah mengelompokan artikel (disebut juga postingan) kedalam Label/kategori/tema yang sama.

Adapun langkah-langkah untuk memasang supaya muncul Artikel Terkait di bawah postingan adalah sebagai berikut :
  1. Buka Edit HTML -> pilih Expand Widget Templates
  2. Seperti biasa, untuk membiasakan kehati-hatian maka jangan lupa backup templates terlebih dahulu
  3. Setelah itu cari dengan control find kode : <data:post.body/>
  4. Kemudian copy paste kode berikut tepat di bawah kode yang telah kamu cari tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<span class='box'>
<div class='widget-content'>
<h3>
Artikel Terkait</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

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

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;

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>
</span></div>

</b:if>

Setelah selesai simpan dan lihat hasilnya.

Sementara itu kamu juga bisa menambah atau mengurangi jumlah artikel terkait dengan mengganti angka pada kode yang berwarna biru diatas, selain itu pula kata "Artikel Terkait" pada kode yang berwarna merah, bisa kamu ganti menyesuaikan bahasa kamu sendiri seperti : Related Articles, Related Posts, Artikel Yang Mirip, Baca Juga, Artikel Sejenis atau kalau bahasa induk blog kamu menggunakan bahasa daerah sekalipun, kamu juga bisa menyesuaikannya.
Selamat mencoba – http://www.alifiarahmany.blogspot.com/


Artikel Terkait



6 comments:

indra putu achyar said...

hallu mat pagiiii, mao nanya nie, yang no 3, code nya mana yak, aku kagak ngerti nie... :)

Lifi Family said...

Pagii juga..iya Om tadi waktu nulis sempet putus koneksinya, jadi hilang deh...tapi sekarang udah ada lagi

indra putu achyar said...

hueheheh iya yak... thanks yak...

rio2000 said...

ini dia tutorial yg aku cari-cari :D
saya bookmark dulu.... nanti saya coba praktek :D

"budhe Fakhrun Musriati" said...

Wah... iya nich.. budhe pengen banget nyoba ..makasih ya.. tapi untuk bikin red more aja blum brasil hiks!!

Gimana dhonk..budhe sendiri juga agak enek lihat blog budhe yang tulisannya malur malur gitu he..

klo' dah bisa nyang entu,mo' coba nyang ni ah..makasih ya.. smoga hari ini dan seterusnya menyenangkan berkah barokah..Amien..

ArVandy's said...

Trima kasih yach oom, atas infonya...
saya akan segera menerapkannya di blog saya..

Oh iya oom mohon izin untuk mendokumentasikanya yach oom :D

Post a Comment