Artikel Terkait atau yang biasa disebut juga dengan Related Posts merupakan daftar link dari judul-judul artikel di blog kita dengan label yang sama dan biasanya berada di bawah postingan. Adanya widget artikel terkait ini dapat memudahkan pengunjung menjelajahi blog kita terutama untuk artikel yang berkaitan.
Tampilan dari widget artikel terkait ini dapat hanya berupa judul-judul artikel saja atau ada juga yang dengan gambar/thumbnail. Setiap blogger mempunyai selera dan alasan tertentu untuk menggunakan tipe widget yang dia pilih.
Untuk memasang widget artikel terkait seperti yang terpasang di blog ini, Anda bisa mengikuti langkah-langkah pemasangannya di bawah ini.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
6. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>
Tampilan dari widget artikel terkait ini dapat hanya berupa judul-judul artikel saja atau ada juga yang dengan gambar/thumbnail. Setiap blogger mempunyai selera dan alasan tertentu untuk menggunakan tipe widget yang dia pilih.
Untuk memasang widget artikel terkait seperti yang terpasang di blog ini, Anda bisa mengikuti langkah-langkah pemasangannya di bawah ini.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
6. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>
<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>
7.SIMPAN TEMPLATE
HAPPY BLOGGING SEMOGA BERHASIL..:D
Tidak ada komentar:
Posting Komentar