Related Articles atau Artikel Terkait dalam Blogspot
Oleh Victor | May. 18, 2009 | Blogging, Tutorial & Trik Blogspot
Jika membuat suatu posting atau artikel dalam blog, biasanya kita memiliki artikel lain yang berhubungan dengan artikel yang sedang kita buat, entah itu materi yang sama, saling mendukung, atau tulisan yang dibuat dari sudut pandang lain. Artikel yang saling terkait ini menguntungkan bagi pengunjung, karena pengunjung bisa mendapatkan bahan pembanding lain atau minimal dapat referensi lain yang sejenis. Selain keuntungan bagi pengunjung, keterkaitan antar artikel ini juga menguntungkan bagi pemilik blog atau website, karena pengunjung akan lebih lama berada di blog/website untuk melihat artikel yang lain tersebut.
Bagaimana pengunjung bisa mengetahui artikel lain yang berhubungan? Apakah pengunjung harus mencari sendiri? Tentu saja bisa seperti itu, tapi berapa persen dari pengunjung blog yang mau mencari sendiri artikel lain yang berhubungan dengan artikel yang sedang dibacanya?
Untuk membantu pengunjung kita dalam mencari artikel terkait, kita sebagai pengelola blog/website bisa membantu dengan menyediakan link artikel lain yang berhubungan tersebut, salah satunya dengan meletakkan link tersebut di bawah artikel. Ini merupakan cara yang paling mudah bagi pengunjung untuk mengaksesnya, karena langsung bisa memilih artikel terkait yang ada.
Dalam WordPress, sudah disediakan plugins yang tinggal pasang, maka otomatis dibawah artikel yang dimuat langsung dibuatkan link ke artikel lain yang berhubungan. Bagaimana dengan Blogspot? Secara khusus memang tidak disediakan plugins tersebut, tapi kita tetap bisa membuatnya dengan sedikit menambahkan script yang ada (entah siapa yang membuatnya pertama kali) ke dalam HTML code.
Berikut akan saya tunjukkan langkah-langkah membuat link artikel terkait di bawah artikel. Pada prinsipnya script ini akan mengambil artikel terkait berdasarkan Label yang kita pakai dalam artikel kita, jadi artikel dengan Label yang sama akan dikumpulkan dan ditempatkan sebagai artikel terkait.
Langkah pertama adalah kita masuk ke Control Panel User, masuk ke tab Layout dan Edit HTML, seperti biasa, jangan lupa untuk mencentang Expand Widget Templates untuk memunculkan seluruh script yang ada.

Langkah berikutnya, kita cari tag <data:post.body/> (untuk lebih mudahkan gunakan fungsi pencarian pada browser dengan kata kunci post.body). Jika kita sudah memasang script Read More, maka kita pasang script Related Articles di bawahnya (lebih tepatnya di bawah tag </b:if>.

Pasang script Related Articles berikut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<br/>
<h3>Related Articles</h3>
<div id='database'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 6;
var 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;database&#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>

Yang harus diperhatikan dari script tersebut adalah:
var maxNumberOfPostsPerLabel = 6; (ini berarti akan dipasang 5 artikel tambahan, yang satu adalah artikel yang dimuat itu sendiri)
var maxNumberOf Labels = 3; (ini berarti akan dipasang artikel terkait berdasarkan 3 Label yang sama)

Setelah kita pasang script, sekarang kita bisa simpan perubahannya.
Jika berhasil, maka di bawah artikel yang sedang dibaca akan muncul artikel lain yang mempunyai Label sama (terkait). Sebagai contoh bisa dilihat pada blog money-online-banking.blogspot.com.

Cukup mudah kan, langkahnya, selamat mencoba.
Silahkan baca juga trik Blogspot lain tentang Recent Comments, Recent Posts, Read More, mengganti Favicon, dan menyembunyikan Navbar.
Tulisan terkait :
|
|










December 27th, 2009 at 17:20
wah ga bisa ko dipasang diblogku malah hilang postingannya sob…
kenapa ya ???
htt://nagapasha.blogspot.com
January 14th, 2010 at 01:03
[...] melakukan beberapa modifikasi pada template HTML seperti trik membuat Table Of Contents, Spoiler, Artikel Terkait, dan trik Blogspot [...]
January 31st, 2010 at 00:04
Postingnya koq malah ilang….gagal di terapkan di blog saya
March 3rd, 2010 at 17:42
gimana nih?? udah pada terbukti manjur belum???
March 14th, 2010 at 16:40
wah kok susah ya kayaknya bikin related articles
April 17th, 2010 at 15:53
mampiiir gan..^^
April 29th, 2010 at 22:58
wah kok punya saya malah post nya ilang semua kalo di kasih code ini yah gan ?
mohon pencerahan :)
June 29th, 2010 at 10:25
dulu saya pernah bisa pakai kode ini, tapi saat postingan saya ubah pake readmore otomatis, saya coba lagi kok gak bisa ya …. postingan malah hilang di page pertama
August 4th, 2010 at 16:48
Agak ribet nih karena pake kode-kode HTML. Tapi akan saya coba deh. Moga2 aja berhasil