Saturday, April 25, 2009

Cara Membuat Related Post (Artikel Yang Berhubungan)

Related post dalam sebuah blog menurut saya sangat penting untuk menghindarkan pengunjung blog dari kebosanan. Dengan adanya related post ini maka pengunjung blog kita tidak akan mudah kabur begitu saja setelah membaca satu artikel dari blog kita. Selain memudahkan navigasi, juga mempermudah pengunjung blog kita untuk menemukan artikel yang berhubungan.


Ada beberapa cara untuk membuat Related Post ini karena memang biasanya tergantung dari template yang digunakan cocok atau tidak. Tapi disini saya akan membagi cara membuat Related POst yang hampir bisa digunakan disemua template, karena sudah saya buktikan sendiri dibeberapa blog saya yang menggunakan template yang berbeda.

Untuk membuat Related Post silahkan anda ikuti langkah-langkah berikut ini:

1. Login ke akun blog anda
2. Menuju Edit layout HTML, lalu centang Expand Widget Template
3. Download template Anda untuk mengantisipasi jika sewaktu-waktu anda gagal mengedit.
4. Cari code dibawah ini (Untuk memudahkan pencarian, silahkan tekan F3 di keyboard)

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

5. Jika sudah ketemu copy dan paste kode berikut tepat dibawah kode diatas.


<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://blogger.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->

<!--

1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</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 template dan lihat hasinya.

Dalam setiap posting anda harus memberikan label/category, karena Related Post ini bekerja(mengelompokkan) berdasarkan label/category masing-masing. Jika dalam setiap posting anda tanpa label/category maka tidak akan bisa menampilkan Related Post (Artikel Yang Berhubungan)

Selamat Mencoba...

2 comments:

essalafy said...

Bos tak coba ke blogku kok muncul labelnya juga gak cuma post yang berhubungan seperti blog ini,jai tajk copot lagi, thanks, lam kenal.

achmadtk07_baraya said...

Manstab, Thanks infonya Gan, Langsung Olah TKP. Aq Koment plus Follow ya. Koment + Follow Balik Gan. Terimakasih.