Membuat Artikel Terkait dibawah Posting dengan fungsi Scroll

Pembelajaran Komputer dan Internet - Udah lama banget gak posting Tutorial Blogging,hehe,, ni saya mo share Membuat Artikel Terkait dibawah Posting dengan fungsi Scroll, mungkin sudah jadul yah sekarang aja udah pada bikin yang keren-keren, tp ndak apa lah buat yang belom tahu aja.hehe..

Kalo sobat baru dalam masalah blogging perlu sekali membuat Related Post dimana bisa berfungsi menambah jumlah pageview. Lumayan juga kan

Berikut Langkah Membuat Related Post :
1. Login ke akun blogger, klik Rancangan > Edit HTML > centang expand template widget.
2. Cari kode <data:post.body/>
kalo ada 2 cari yang paling bawah

3. Masukkan 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>

4. Cari kode ]]></b:skin>
5. Masukkan kode di bawah ini 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 template.

Ket : Perhatikan keterangan yang berwarna biru, silahkan ganti sesuai keinginan.

Nah itu tadi Cara Membuat Artikel Terkait dibawah Posting dengan fungsi Scroll,
Selamat mencoba dan Semoga Bermanfaat 

Single Links (Recommended)