Cara Memasang Artikel Terkait Dengan Fungsi Scroll | kali ini
Cara Terindah akan membahas seputar tutorial blog, yaitu memasang related post dibawah posting artikel dengan scroll, Kenapa menggunakan Scroll? Alasan yang tepat yang bisa saya berikan adalah agar bisa menghemat ruang dan tempat, dengan begitu akan terlihat simple dan minimalis.
Cara Membuat Related Post Secara Otomatis Dengan Scroll pada script kali ini akan menampilkan Label atau Kategori dengan jumlah yang kita inginkan. Dan akan dibagi berdasarkan Label / Katergori yang sudah dimasukan pada artikel tersebut. Misalnya dalam satu postingan anda memasang 3 atau lebih kategori, maka pada bagian artikel terkait itu akan menampilkan semua kategori yang dimasukan. teori memang bikin pusing langsung aja deh kita praktekin.
CARA MEMASANG ARTIKEL TERKAIT DENGAN FUNGSI SCROLL
Berikut ini adalah langkah-langkah Cara Membuat Related Post Dengan Fungsi Scroll :
1. Buka Blogger
2. Setelah itu klik Elemen - Template - pilih Edit HTML (disarankan backup template terlebih dahulu)
3. Carilah kode berikut (gunakan CTRL + F untuk mempermudah pencarian)
<div class='post-footer-line post-footer-line-1'>
4. Apabila anda menemukan dua kode yang sama seperti diatas, pilihlah yang pertama.
5. Langkah selanjutnya copy kode dibawah ini
<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. Paste kode diatas, tepat di bawah kode
<div class='post-footer-line post-footer-line-1'>
7. Klik Simpan. Lalu lihat hasilnya.
8. Finish
Keterangan :
Artikel Terkait: bisa anda ganti judulnya sesuai selera ( contoh : Related Post, artikel yang berhubungan, dll ) atau anda juga bisa menghapusnya jika tidak ingin menampilkan judul label.
Sekian Tips kali ini yang berjudul Cara Membuat Artikel Terkait Dengan Fungsi Scroll bagi yang masih kurang paham atau belum jelas dan ingin tanya-tanya lebih dalam. bisa tinggalkan jejak kalian dibagian komentar, selamat mencoba dan semoga berhasil.
