Kita ketahui bahwa Artikel Terkait atau Related Post
berfungsi untuk membantu para pengunjung agar mengetahui apa saja
artikel yang berhubungan dengan keyword atau artikel yang dia baca.
Sementara manfaat bagi pemilik blog adalah akan menambah Page view
apabila stiap artikel pada related post tersebut di kunjungi oleh
pengunjung. Lihat gambar dibawah ini Contoh Artikel Terkait di Blogspot atau anda bisa lihat langsung di bagian bawah setiap postingan blog ini.
Cara Membuat Artikel Terkait di Blogspot
1. Login ke blog anda > Design > HTML > centang Expand widget templates
2. Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F agar lebih mudah
3. Biasanya ada 2 kode tersebut, anda cukup fokuskan pada kode yang pertama saja.
4. Jika sudah ketemu, Copy kode dibawah ini.
5. Lalu paste dibawah kode <div class='post-footer-line post-footer-line-1'>
6. Simpan template. Lihat hasilnya
Catatan:
 |
| Contoh |
1. Login ke blog anda > Design > HTML > centang Expand widget templates
2. Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F agar lebih mudah
3. Biasanya ada 2 kode tersebut, anda cukup fokuskan pada kode yang pertama saja.
4. Jika sudah ketemu, Copy kode dibawah ini.
Klik Spoiler Berikut:
<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<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('albri').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>
6. Simpan template. Lihat hasilnya
Catatan:
- <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
- <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
- maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
0 komentar:
Posting Komentar