Artikel Terkait dengan Fungsi Scroll

Membuat Artikel Terkait dibawah Posting dengan fungsi Scroll. Bagi yang ingin membuat related post dengan scrool berikut tutorialnya.

1. Login ke akun blogger
2. Masuk menu Templates > Edit HTML
3. Cari kode <data:post.body/>
4. Copy kode berikut tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='underpost'><div class='similiar'><div class='widget-content'>
<h2>Related Post</h2>
<div id='artikel-terkait'><div id='relposts'/><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;relposts&#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></div>
</b:if>

5. Cari kode ]]></b:skin> letakkan kode berikut tepat diatasnya

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;
font-size:small;/* Ukuran font. */
color:#F13C3C;/* Warna teks. */
background:#ffffff;/* Warna latar belakang. */
clear:both;
float:left;
width:510px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:&#039;Trebuchet MS&#039;,Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#F13C3C;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #F3D8D8;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:200px;/* Tinggi dari artikel terkait */
padding:10px;
}

6. Simpan


Nah itu tadi Cara Membuat Artikel Terkait dengan fungsi Scroll. Selamat mencoba dan Semoga Bermanfaat :)