Cara membuat artikel terkait di bawah posting
Cara membuat artikel terkait di bawah posting. Pada saat kita membaca suatu artikel terkadang pembaca ingin membaca juga postingan yang ada hubungannya dengan artikel tersebut. Dengan adanya artikel terkait, pembaca akan dengan mudah melihat judul artikel yang ada hubungannya. Hal ini akan sangat mempermudah pembaca untuk menjelajahi seluruh isi artikel kita.
Artikel terkait bisa diletakkan di sidebar maupun di bawah postingan. Saya sendiri menggunakan pilihan yang ke-2, yaitu artikel terkait di bawah postingan. Menurut saya ini lebih efektif, karena setiap pembaca sehabis membaca seluruh artikel kita, maka di bawahnya ditampilkan artikel terkait yang ada hubungannya dengan artikel tersebut.
Untuk membuatnya sangat sederhana, langkahnya sebagai berikut:
1. Pastikan anda telah masuk ke Account blog anda.
2. Kik Rancangan.
3. Klik Edit HTML.
4. Download Template Lengkap untuk berjaga-jaga jika terjadi kesalahan
4. Klik Klik Expand Template Widgets.
5. Tekan Ctrl + F untuk pencarian cepat.
6. Copy code <data:post.body/>
7. Paste pada kotak Find hasil tekan Ctrl + F tadi.
Kode yang anda cari akan terblock warna hijau.
8. Setelah ketemu copy code di bawah ini dan paste setelah code <data:post.body/>
<textarea><b:if cond='data:blog.pageType == "item"'><br /> <strong>Artikel Terkait</strong><br /> <div class='rbbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><div id='ardi33'/><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('ardi33').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><br /> </div><script type='text/javascript'>RelPost();</script><br /> </div></b:if>
Atau code detailnya seperti ini:
<textarea rows="5" cols="25" onclick="this.focus(); this.select();"><textarea><b:if cond='data:blog.pageType == "item"'>
<strong>Artikel Terkait</strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<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('ardi33').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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if></textarea></textarea>
9. Save template, selesai.
Note:
Artikel terkait: berwarna merah bisa anda ganti dengan dengan "Baca juga yang ini" atau "Yang sering dibaca " atau yang lainnya, terserah anda.
height:200px:tinggi kolom, silahkan edit sesuai selera anda.
Untuk mengecek apakah artikel terkait anda sudah berjalan atau belum, coba anda buka salah satu artikel anda. Jika sudah benar Artikel terkait akan tampak persis di bawah artikel anda.
"Selamat mencoba"
Komentar
Posting Komentar