Cara Membuat Related Post di blogger. Related post adalah menampilkan artikel yang berhubungan atau artikel yang sejenis (satu label). Dengan kata lain menampilkan beberapa artikel yang berada pada satu label. Contohnya teman-teman tips blogger bisa melihat pada akhir dari postingan saya ini, yaitu ada kotak yang bertuliskan "Read This | Baca Yang ini". Nah bagaimana cara membuatnya?, caranya sangat mudah. Apa teman-teman ingin mencobanya?, apabila iya silahkan lanjut membaca Cara Membuat Related Post.
Cara Membuat Related Post
1. Login ke account blogger kamu.
2. Masuk ke kustomisasi >> edit html.
3. Kemudian Klik centang pada "expand widget template".
4. Cari kode
<p><data:post.body/></p>
(tekan Control+F lalu masukkan kode tadi)5. Pasang kode di bawah ini tepat di bawah kode
<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Read this | Baca yang ini</h3>
<div style='border: 2px solid rgb(230, 230, 230); width:100%; height:300px; overflow:auto;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 50;
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><p>Widget by [ <a href='http://tips-tutorial.blogspot.com/2009/08/cara-membuat-related-post-artikel-di.html' target='new'>Tips Blogger</a> ]</p>
</div>
</b:if>
6. Simpan dan lihat hasilnya...
Selamat mencoba...salam tips blogger.
Widget by [ Tips Blogger-Tutorial Blogger Pemula ]
13 comments:
Thanks ...
Nice infonya!
Terima kasih telah berbagi, sudah terlaksana...
Sama-sama all....sering-sering mampir ya.
makasih infonya boss..keereeenn
:)]Terima kasih ilmunya mas...salam kenal ya..
thanks infonya bro, sangat berguna sekali
salam kenal
Makasih kang. Cuma kalo mau ngilangin atau nge-hiden nama labelnya yang muncul sebelum list. Gimana Kang?
Nah kalo yang ini saya pernah coba. mudah di edit n gak terlalu berat buat blog. Nice Share :)
Terima kasih atas tutorialnya sob
Terima kasih banget atas tutorialnya. Sekarang related post nya sudah berhasil terpasang di blog saya.
manteb ilmunya,,, langsung coba dan berhasil hehhe :D
Posting Komentar
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))
Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .
Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...