Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Monday, October 18, 2010

Cara Membuat Artikel Terkait – Related Post

cara membuat artikel terkait - related post Untuk memudahkan pengunjung dalam menyusuri artikel-artikel di blog,kalian bisa menambahkan widget Artikel Terkait kedalam kolom postingan kalian. Fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama,dapat ditampilkan juga dalam post yang sedang dibaca pengunjung. Biasanya,widget ini diletakkan di bawah postingan.

Bagaimana cara membuatnya?,simak aja step-step pembuatannya berikut ini..

1. Login ke Account/Dashboard blog kalian. Masuk ke menu Edit HTML.

2. Backup dulu template kalian,untuk berjaga-jaga apabila ada kesalahan. Caranya,klik link Download Template Lengkap.

3. Kalo udah,beri tanda centang pada Expand Widget Templates

4. Cari kode <data:post.body/> menggunakan CTRL+F pada browser. dan letakkan kode dibawah ini setelah kode tersebut.

(Nb: Akan ada 2 kode <data:post.body/> pada template yang sudah memakai fitur readmore. Oleh karena itu,pastikan kode berikut ini di letakkan setelah kode <data:post.body/> yang pertama.)

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<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 = 10;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 11;
maxNumberOfLabels = 4;
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>

5. Save template dan lihat hasilnya.

*** Keterangan kode ***

<h3>Artikel Terkait</h3>                         <<----  Judul Widget.

var maxNumberOfPostsPerLabel = 10;       <<----  Jumlah post yang ditampilkan pada setiap labelnya.
var maxNumberOfLabels = 3;                    <<----  Jumlah label yang ditampilkan.
maxNumberOfPostsPerLabel = 11;             <<----  Jumlah maksimal post yang ditampilkan pada setiap labelnya.
maxNumberOfLabels = 4;                          <<----  Jumlah maksimal label yang ditampilkan.

Sesuaikan kodenya dengan selera kalian sendiri.

Finally,semoga bermanfaat.

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

3 comments:

kang, mau tanya, kenapa ya blogku g bisa pakek artikel terkait itu
pdhl saya sudah sama dengan prosedur

makasi ya infonya..aku coba ternyata bisa.^^

@ardian --> Kodenya udah ditaruh di data:post.body yang pertama?

@Windeartfly --> Sama-sama ^

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra