Membuat Related Post /Posting Terkait
Posted in blog, tutorial, utak-atik
Kemarin aku bikin/nambahin 'related post' di blogku ini.. Jadi itung-itung majang judul postingan lain dalam kategori/label yang sama dengan postingan yang sedang dibaca.. Sekalian jadi ajang promosi postingan2 baheula yang mungkin sudah nyaris terlupakan..
Aku ngambil tutorialnya dari blognya mas wawan nih.. Matur nuwun nggih mas..
-- Tulisan Related Post bisa diganti dengan 'artikel terkait', 'post terkait' atau apa aja terserah deh..
-- 'Max number posts per label' dan 'Max number of labels' bisa diganti jumlah postingan yg diinginkan.
Aku ngambil tutorialnya dari blognya mas wawan nih.. Matur nuwun nggih mas..
- 1. Login di Blogger.
- 2. Klik Layout>>Edit HTML.
- 3. Centang 'Expand Widget Template'.
- 4. Cari kode <p><data:post.body/></p>.
- 5. Tambahkan kode di bawah ini tepat di bawah kode <p><data:post.body/></p> 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 = "<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>
- 6. Save Template.
-- Tulisan Related Post bisa diganti dengan 'artikel terkait', 'post terkait' atau apa aja terserah deh..
-- 'Max number posts per label' dan 'Max number of labels' bisa diganti jumlah postingan yg diinginkan.
wah... ini to yang bikin blog mbak Tyas yang satunya ada sesuatu yang baru hehehe...
ReplyDeletebikin tutorial TAG cloud mbak... yang kemarin aku tanyain... biar aku gak mumet2 nyari hehe... kodeku ilang neh...
ooo gitu ya carane... jadi postingan dengan label yang sama gitu ya..
ReplyDeletesip sip...bole juga di praktekin
kerennnn.....mb tyas beraksi
ReplyDeletembake kie sll ada yg br..updet terus euy
ReplyDeletelha itu ga tabrakan dengan code nya read more kan mbak? soalnya kan read more juga ditaruh di bawah < p >< data : post.body / > < / p > persis
ReplyDelete@diary pink: iya lyl, aku nyoba buat disini sama blog satunya..
ReplyDelete@milla: monggo dicoba Mill..
@tips kecantikan: beraksi opo to An? wong mung nyonto..
@girls corner: ini krn nggak ada bahan postingan jye..
@ipanks: kalo aku sih kutaro di atasnya kodenya 'read more', panks..
wah udah jadi tutorial sekarang :D
ReplyDeletewaduh PRnya ...heheheh
nti saya kasih backlink mbakeee...tenang ajeee...wkwkwkwk
bisa keramean kalo saya juga pake ini diblog saya..
ReplyDeletetapi sip dah tutorialnya...
hehehe
seep neh, disimpen dulu deh mbak, abis ga punya blog blogspot :D
ReplyDeletemantep mbak, bikin lagi posting2 tutorial macem gini
saya lagi cari widget tulisan teratas yang ada jumlah komentar seperti punya wordpress.kalao nemu tolong di bagi ya :)
ReplyDeletembake udah saya kirim backlink atu kesini...heheheh...iseng komenk, klo tutorial ra mudeng...heheheh
ReplyDeletevery interesting post :)
ReplyDeletentar aku praktekin deehh..belum punya soalnya he he..
ReplyDeletesip langsung di praktekin nih
ReplyDeletesalam kenal dulu
ReplyDeletebyme http://insitelink.com
ada cari yg lebih simpel nih mba, di blognya mintblogger wkt itu aku baca. cuma make 3 baris kode ( walo ttp menggunakan js )
ReplyDeleteCari di Google, Untung ketemu mb Tyas...
ReplyDeleteoke udah bisa!!
ReplyDeleteini ni yang dicati, tapi jadi nambah berat blog gax??
ReplyDeletesiip tutorialnya..makasih ya
ReplyDeletethanks bangat dengan tutorial ini. udah jadi dong di blog aku^^
ReplyDeleteAfter I read your blog, I think it's very useful information.
ReplyDeleteI'm very delighted to invite you to Stop Dreaming Start Action and Stop Dreaming Start Action
Warm Regards
yuliantoro
mbak ijin copas ya scriptnya... thanks.. lam kenal
ReplyDeletemakasih banget nih mbak masih ada cara2 nambahin sidebar blog, maklum baru blajar dan kenal blog
ReplyDeleteSelama ini aku kalau buat related post hanya pake link biasa aja pada tiap posting, jadi saya buat manual. Thanks ya sarannya
ReplyDeleteBagus banget tutorial Anda. terimakasih.
ReplyDeleteAkhirnya dapat juga artikel ini, thx yach..
ReplyDeleteSudah bisa mbak diterapkan di blog saya, matur nuwun tutorialnya. Salam.
ReplyDeleteboleh juga tu triknya ....
ReplyDeleteKeren
ReplyDeleteTukar link yuk
www.trik-gue.co.cc
terima kasih mbak, sangat membantu infonya :)
ReplyDelete