Cara menampilkan Artikel yang Berhubungan
Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post" , "Related Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yg sedang mereka baca. Contohnya seperti yang ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang berdasarkan pada kategori atau label yang sama. Nha mau tahu cara membuatnya?
Caranya cukup mudah, ikuti langkah2 berikut ini:
1. Login dulu ke blog kamu
2. Pilih menu "Rancangan - Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template" .
4. Setelah itu cari kode ini <data:post.body/> dan letakkan script dibawah ini setelah kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<div id='vebyorel'>
<b>Get This Widget <u><a href='http://hitsuke.blogspot.com/2009/05/menampilkan-artikel-yang-berhubungan.html'> Here </a></u></b>
</div>
Kamu bisa melihat contohnya disini. Kode dibawah ini adalah kode setelah kode Artikel yang berhubungan diatas ditambahkan.
Kode untuk Artikel yang berhubungan setelah ditambahkan :
Note: Untuk blog yang ada "readmore"nya biasanya akan terdapat 2 kode. Nha km taruhnya di bawah kode yang pertama.
5. Kalo sudah simpan (SAVE) template kamu dan lihat hasilnya.
![]() |
| Contoh punya q yang sudah jadi di Browser Google Chrome |
Tambahan:
Sekarang sudah ada readmore terbaru klik disini untuk mencobanya
Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.





21 Responses to "Menampilkan Artikel yang Berhubungan"
Post a Comment
SPAM = Trash • Rule • Help?
good post ... lumayan tambahan ilmu
sob,, gwa dh tes tips tu,, tpe bagaimana cara menggunakan tips tersebut jika dia menggunakan readmore otomatis???
tlang bantuannya y sob..
@Hatake addict/Ajis, ywdah save templatena dulu ntar bw rumah abg. byar bg yg ngurus ^_^
artikel yang menarik ..kapan-kapan akan aku gunakan.trima kasih
readmore gw otomatis udh gw cari kode data:post.body adanya cuman 1 tapi kode itu dempet sama yg lainya aku taruh setelah kode itu aja tapi ga keluar bos..??Related Posts by Categories nya bantuin dong???he he..sekalian tukar link ya...udh gw pasang linknya si bos Hitsuke pasang balik ya..ditunggu di www.adinmarscell.co.cc
blog'y bmanfaat bgt....
saya punya blog pengen ada artikel yg berhubungannya,
tapi ga ada kode
gimana tuhh????
saya mohon bantuannya, bls ke email sya dbskusukses99@yahoo.co.id
ini blog saya http://myfolder99.blogspot.com/
keren :D
wkwkwkkwkw
udah di coba koq ga keluar? :?
:((
ada yang tw g..biar related post nya muncul d googleeeeee chroooommmmmmmmmmmmmmmmmmmmmmmmmmmme
punya q g muncul..... :o
http://kesmas-unsoed.blogspot.com
@alonemisery, bisa kox...di google chrome...punya q aja make yg ini :)
g bs bro... :(( help.....me.....
minta alamat email nya dunk :o leh privat kan...
alonemisery
@alonemisery, add aja twitter q nie http://twitter.com/vebyo
ntar via twitter aja..klo e-mail percuma..
aq jarang buka email ( :
kok saya tidak ada kode ini ya??
Thanks ya... enak nih,, gk kbanyakan script...
:@
kak, pada menu rancangan-edit html terdapat di mana kak? kok enggak ada
@roi_sihombing, nah..kk mw nanya balik nih..
tmpilan Blogger kan sudah di update..
kmu make yang mana..??
What a great and clear tutorial...
@MuhaiminAbd, mkasih bro :)