Cara Membuat Artikel Terkait di Dalam Scroll Bar

Malam sobat blogger, kali ini saya akan posting tentang tips trik untuk blogging. Bagi sobat blogger yang mencari cari gimana sih bikin widget artikel terkait yang biasanya ada di bawah postingan seperti blog saya ini. Tapi yang saya posting ini bukan widget yang mencamtukan Artikel Terkait yang biasa lho, ini sudah saya sertakan scroll nya juga. Jadi, widget Artikel Terkait sobat nantinya akan terdapat di dalam sebuah kotak yang bisa di scroll ke bawah, jadi tidak terlalu memakan tempat yang memanjang, dan ukurannya pun bisa sobat sesuaikan dengan keinginan sobat ataupun sesuai dengan ukuran blog sobat sendiri. Oke kita langsung saja deh ke tkp nya. Ini dia di bawah langkah langkah untuk memasang widget Artikel Terkait yang sudah saya jelaskan tadi.


1. Masuk dan Login seperti biasa di Blogger

2. Lalu masuk ke Edit Html

3. Kalau sobat takut kenapa kenapa templatenya, sobat bisa mendownload dahulu templatenya sebagai back up jika terjadi hal yang tidak diinginkan. Kemudian centang Expand Template Widget

4. Kemudian Copy kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

5. Lalu cari kode <data:post.body/> (biasanya ada template yang mempunyai lebih dari dua kode tersebut, jika sobat mendapatkan hal tersebut, sobat pilih saja kode yang berada kedua, kalau tidak berhasil sobat mungkin harus mencoba nya satu demi satu)
6. paste kode yang sudah di copy tadi tepat setelah kode <data:post.body/> tersebut

7. Untuk kode yang berwarna merah untuk ukuran dari widget dan kode yang berwarna hijau itu untuk menentukan warna background dari widget tersebut.

8. Jika sudah sobat bisa klik save template dan cek keberhasilan widget ini


Diharapkan sobat memberi tahu hasil dari pemasangan widget ini berhasil atau tidaknya agar sobat blogger lainnya juga dapat mengetahui khasiat dan manfaat widget ini. Terima Kasih!