Cara Membuat Related Post / Artikel Terkait

Sudah cukup lama saya nggak nulis soal tutorial blog. Setelah mikir-mikir, akhirnya saya pilih tutorial cara membuat related post untuk postingan kali ini. Meski ini bukan teknik baru, tampaknya masih banyak blogger yang blognya belum disupport related post. Padahal, fungsi related post atau posting terkait atau artikel yang berhubungan cukup penting. Yakni pengunjung bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yang sedang dibaca. Keuntungan lain adalah kita bisa ‘mempromosikan’ artikel-artikel lama. Jika halaman blog diibaratkan toko, maka related post ini etalasenya.

Oke, langsung saja ke tutorialnya berikut ini:

1. Login ke blog anda

2. Masuk menu 'Layout-->Edit HTML'

3. Centang kotak 'Expand Widgets Template'

4. Cari kode ini <data:post.body/>

5. Letakkan script berikut ini di bawah kode <data:post.body/> 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. Simpan. Selesai.

Anda bisa mengganti tulisan 'Related Post' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. Kalau di blog saya tulisannya 'Baca juga postingan di bawah ini'

Selamat mencoba.

Sumber:

http://wawanwae.blogspot.com/2009/01/cara-membuat-related-post-posting.html

Membuat Related Post atau Posting Terkait Bergambar

Ada yang berbeda dengan tampilan blog referensi registrasi dari minggu yang lalu. Blog ini telah memuat related post atau posting terkait atau juga tulisan yang berhubungan. Yang membuat lebih bersemangat adalah karena tampilannya yang yang cantik dan menarik, yaitu dengan memakai gambar thumbnail.

Postingan ini sekaligus menjawab pertanyaan dari sobat rigih di kolom komentar pada postingan pertamina blog kontes yang menanyakan bagaimana cara membuat related artikel dengan thumbnail seperti yang ada di blog saya

Bagaimana cara membuatnya ?
salah satu kelebihan cara membuat Related Post ini adalah kita tidaklah membutuhkan pengetahuan tentang teknik meng utak-atik kode HTML. Cukup dengan menggunakan jasa linkwithin.com kita sudah bisa menampilkan Posting Terkait Bergambar.


Opsi tambahannya adalah kalian bisa men-checklist tulisan My blog has light text on a dark background jika blog anda menggunakan template yang berbackground hitam dan tulisan artikelnya putih. Dan biarkan kosong/unchecklist jika background blog kita berwarna terang.

Pada linkwithin.com kita hanya diperintahkan untuk mengisi email, bloglink atau nama blog kita, memilih plattform blog dan menentukan jumlah posting terkait yang akan kita tampilkan di setiap akhir postingan.

Untuk plattform blog, tersedia 3 pilihan yaitu : Blogger, Wordpress dan Typepad. Tapi jangan khawatir, buat blogger yaang berplaform lain seperti joomla, multiply atau yang lain. Karena linkwithin.com anda juga bisa mendapatkan widgetnya walaupun harus sedikit bersusah payah dengan mengutak-atik kode HTML.

Khusus buat yang berplatform blogger, jika data yang diperlukan sudah terisi dengan benar. Klik tombol Get Widget lalu klik Add Widget. Maka widget dari linkwithin.com akan masuk ke bagian sidebar blog (sebaiknya anda harus login dulu ke blogger.com).
Untuk tampilan yang lebih baik, drag lah widget yang diberikan kebagian bawah postingan (bukan di bagian footer lho). Maka tampilan postingan terkait akan muncul tepat dibawah postingan.

Sumber:
http://referensiregistrasi.blogspot.com/2009/10/membuat-related-postposting-terkait.html