Membuat Artikel Terkait di blog blogspot

Image via WikipediaArtikel terkait, apa maksudnya? Mungkin anda sering melihat halaman blog atau web yang di bagian bawah dari tiap artikel yang tampil terdapat beberapa link yang terhubung ke halaman lain dari blog itu. Dan di atas link tersebut tertulis artikel terkait atau Related post. Ada juga yang menggunakan istilah lain, misalnya; Posting terkait, Artikel lainnya atau Artikel Berhubungan dan lain-lain.

Adapun untuk blog yang sedang dihadapan anda ini, istilah “artikel terkait” kami ganti dengan kalimat “Baca Artikel Terkait berikut ini:” yang dapat anda lihat di bagian bawah dari halaman ini. Inilah yang akan kita bicarakan, terutama tentang bagaimana membuat link yang menghubungkan artikel di halaman posting dengan artikel terkait lainnya yang terdapat di dalam blog tersebut.

Sebenarnya ada beberapa versi artikel terkait. Akan tetapi pada kesempatan ini kita akan membicarakan salah satu versi dari artikel terkait itu. Kita bahas artikel terkait yang sederhana saja dulu, toh hasilnya tidak akan jauh beda dengan artikel terkait versi yang lain. Dan dengan artikel terkait versi ini pun sudah dapat membantu pengunjung untuk berjalan-jalan di blog anda dengan mudah.

Namun demikian untuk artikel terkait versi yang lain, akan kita bahas nanti. Oh ya, hampir lupa, sebelum melakukan langkah-langkah membuat artikel terkait, anda harus tahu bahwa untuk membuat artikel terkait tidak lepas dari mengotak-atik template blog anda. Maka dari itu simpan dulu template blog anda sebelum melakukan operasi template dari blog anda. Jika peringatan saya sudah anda laksanakan, kita langsung ke pokok bahasan yaitu membuat artikel terkait.

Langkah-langkah yang anda lalui untuk membuat artikel terkait di blog anda:

1. Log in di blogger atau blogspot anda.
2. Pilih dan klik Tata letak
3. Klik tab Edit HTML
4. Jangan lupa klik Expand Template Widgets
5. Cari kode:

<p><data:post.body/></p>

Agar mudah menemukan kode tersebut, tekan tombol Ctrl + F dan tulis kode <data:post.body/>. Perhatian! jika anda sudah membuat fungsi read more di blog, anda akan menemukan 2 kode <data:post.body/>. Pilihlah yang pertama.

6. Copy script kode di bawah ini dan letakkan di bawah kode <data:post.body/> yang pertama.

KODE

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='similiar'>

<span class='box'>

<div class='widget-content'>

<h3>Baca Artikel Terkait berikut ini:</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>

7. Simpan template dan selesai. Lihat hasilnya.

Terjawab sudah penasaran kita tentang beberapa link penghubung artikel dengan artikel lainnya yang terdapat di bagian bawah halaman posting. Itulah namanya artikel terkait. Sekarang anda juga sudah bisa bagaimana membuat.