Cara Membuat Artikel Terkait di dalam Scroll Bar

Membuat artikel terkait atau related post ada banyak jenisnya , ada artikel terkait dengan gambar, artikel terkait hanya berbentuk teks dan artikel terkait di dalam scroll bar. dan untuk kesempatan kali ini saya akan berbagi tutorial membuat artikel terkait di dalam scrollbar contohnya seperti gambar ini.

Keuntungan menggunakan artikel terkait dengan scroll adalah artikel yang di tampilkan akan lebih banyak jika di bandingkan dengan artikel terkait yang menggunakan gambar. untuk memasangnya silahkan ikuti petunjuk berikaut ini.

1. login di blogger[dot]com
2. template >> edit html
3. centang pada "Expand Template Widget" kemudian cari kode ini <data:post.body/>
4. jika kode sudah di temukan silahkan letakan kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div class='similiar'><div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'><div class='widget-content'><h3>Artikel Terkait Lainnya :</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></div></b:if>

keterangan :
- height: 300px dalam kode artinya adalah tinggi scroll dan boleh anda ganti
- #fcf7f7 adalah kode warna background dan boleh anda ganti sesuai selera.

5. klik simpan template

sekarang silahkan anda lihat hasilnya dan semoga berhasil.