Cara menampilkan Realated post di posting
Keuntungan dari menampilkan artikel terkait( Related post) untuk posting Sobat adalah membantu pembaca atau pengunjung sobat menemukan lebih banyak informasi yang terkait dengan topik. Hal ini berdasarkan label atau kategori dan biasanya muncul di akhir artikel atau posting secara otomatis. Pengunjung atau pembaca sobat setelah selesai membaca artikel sobat, mereka akan menemukan beberapa link yang berkaitan dengan pos berdasarkan label atau kategori.
Berikut adalah tutorial untuk membuat Related post diakhir posting seperti yang saya kutip dari sobat Kendhin: sang master Tips and Tricks Blogspot:
1. Setelah sobat login ke blogspot, lalu sobat masuk ke halaman Layout/Tata letak blog sobat dan klik Edit Html kemudian centang/beri tanda ceklis pada ' Expand widget template " ( sebelumnya backup dulu template anda dengan cara mengklik Download full template, jadi template sobat yang lama langsung tersimpan )
2.Lalu sobat cari kode seperti dibawah ini
<data:post.body/>
Jika sobat sudah memasang fasilitas Tips memasang READMORE...mempersingkat tampilan postingan dan Tips memasang READMORE-2... sesuai judul posting di template sobat, sobat akan menemukan 2 buah kode yang sama , jadi sobat pedoman aja ke ke kode yang pertama ( seperti contoh kalau di template saya <p><data:post.body/></p>
3.Gimana sobat...? sudah ketemu, kalau sudah ketemu copy kode dibawah ini
<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>
Paste dibawah kode <p><data:post.body/></p>
4. Jika suda klik SAVE TEMPALTE
Silakan sobat lihat hasilnya, semoga berhasil dan sukses
Happy blogging
Berikut adalah tutorial untuk membuat Related post diakhir posting seperti yang saya kutip dari sobat Kendhin: sang master Tips and Tricks Blogspot:
1. Setelah sobat login ke blogspot, lalu sobat masuk ke halaman Layout/Tata letak blog sobat dan klik Edit Html kemudian centang/beri tanda ceklis pada ' Expand widget template " ( sebelumnya backup dulu template anda dengan cara mengklik Download full template, jadi template sobat yang lama langsung tersimpan )
2.Lalu sobat cari kode seperti dibawah ini
<data:post.body/>
Jika sobat sudah memasang fasilitas Tips memasang READMORE...mempersingkat tampilan postingan dan Tips memasang READMORE-2... sesuai judul posting di template sobat, sobat akan menemukan 2 buah kode yang sama , jadi sobat pedoman aja ke ke kode yang pertama ( seperti contoh kalau di template saya <p><data:post.body/></p>
3.Gimana sobat...? sudah ketemu, kalau sudah ketemu copy kode dibawah ini
<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>
Paste dibawah kode <p><data:post.body/></p>
4. Jika suda klik SAVE TEMPALTE
Silakan sobat lihat hasilnya, semoga berhasil dan sukses
Happy blogging
9 comments:
kalo ada waktu pasti aku coba bang. makasih infonya
wew kok jadi pinky pinky
@ CIN_TA : Oke Cin
@ Cebong Ipiet : Sekarang ganti lagi lagi jadi whity2 ..he..he..he..biasa om Cebong suka gonta-ganti warna
sudah pernah dicoba lum..????
---
anyway.. TFS. jika OK.. let me know.. thanks
Nice post Sobat, It work !
Thanks
Thx,s atas tips ini, Dah aku coba dan Insyaallah berhasil
http://puinters.blogspot.com
trim's tips saya langsung coba...salam kenal
this is really amazing.
sangat informatif...terima kasih..
Post a Comment
Indahnya berbagi ilmu , Indahnya berbagi komentar