Cara Memasang Related Posts atau Artikel Yang Berkaitan

Posted by Herman on Saturday, November 01, 2008 16 comments

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.


Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body/>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel yang berkaitan</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>
Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..


Recent Posts:

16 comments

BeO said... 15 June, 2009
Sore boss...
Bermanfaat banget tutor nya bos...
kalo boleh, saya izin review ya artikel nya buat di blog saya....
Kem said... 23 September, 2009
mantap banget om infonya...tapi saya coba kok belum nongol ya released post nya. apakah ada yang salah ?
Stev said... 06 November, 2009
nice info.. tapi kok muculnya di bawah judul.. bukan di akhir artikel ??
INCOME BARU said... 01 December, 2009
tips bagus sob, tapi kalo yang pake scroll gimana ya cara buatnya, maaf newbie
ArhiezOne said... 29 June, 2010
kok ane gk bisa yhe sob? knp tuh kira" ??

mohon pencerahannya
zOneTinUe said... 15 September, 2010
blog dan isi nya semuannya mantab.

mohon bantuannya untuk penjelasan.
saia sudah berhasil memasang related posts, tetapi dibawah judul related posts masih terdapat nama label (tidak langsung ke link posts ; atau seperti yang punya anda..hheh)

mohon bantuannya.
Herman said... 16 September, 2010
@zonetinue:

related posts yg saya gunakan sudah diedit mas jd beda. klu ada waktu, akan saya buat tutornya di blog ini. thanks udah ingatin saya :D
panji karim said... 13 November, 2010
wah mantapppp gan... makasih banyak yah.... :D
Kepalan Tangan Kiri said... 17 August, 2011
mantap dah.., bung mau nanya nih, gimana cara mengatur jarak gedget diblog biar ngak terlalu jauh jaraknya..??

mohon petunjuknya ROMO..hehehe :((
rory said... 20 October, 2011
koq, listnya ga munxul??
Ray Ferdian said... 18 November, 2011
makasih om atas tutorialnya ini yang saya lagi cari ^-^
zOneTinUe said... 05 December, 2011
nb. admin.
saia coba pakai read more, dan code yang dipakai adalah yang kedua*berhasil

sedangkan yang pertama tidak berhasil, apakah ada perbedaan atau bagaimana?:-/
www.zonetinue.blogspot.com

oia.
admin tau cara comment yang terhubung langsung dengan facebook? boleh donk di sharing ;;)

ditunggu terus kabarnya ;)
bilik_bamboe said... 13 December, 2011
makasih infonya om :D
stive said... 24 February, 2012
makasih gannnn
Cardi said... 21 September, 2012
thx infonya,mampir juga gan...
@kakzaini said... 19 January, 2013
Keren...

Komen balik gan ^_^
: konsepmasadepan.blogspot.com

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment