Cara Membuat Related Post / Artikel Terkait Dengan Fungsi Scroll

Cara Membuat Related Post / Artikel Terkait Dengan Scroll | Pada postingan sebelumnya saya pernah bahas tentang Cara Membuat Related Post / Artikel Terkait Di Dalam Postingan Blogspot. Nah untuk tutorial yang ini pasti sudah tidak asing lagi bagi anda, tapi alangkah baiknya kalau saya bahas lagi, mungkin masih ada yang membutuhkan Related post / artikel terkait dengan scroll tersebut.

Dengan memasang related post / artikel berhubungan pada blog anda, akan memudahkan pengunjung untuk melihat artikel yang lain yang sudah anda posting sebelumnya. Nah hal itu akan juga akan mempercantik blog anda karena mudah untuk dilihat pengunjung.

Berikut cara membuat Related Posts dengan fungsi scroll di blog :

1. Login ke Blogger
2. Buka Rancangan => Edit HTML
3. Centang pada Expand Widget Template
4. Cari kode <p><data:post.body/></p> (gunakan Ctrl + F biar cepat pencariannya)
5. Setelah dapat, lalu copy kode di bawah ini dan letakkan di bawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

6. Langkah selanjutnya cari kode ]]></b:skin>
7. Lalu copy kode di bawah ini letakkan di atas ]]></b:skin>

/*-- Related Post dengan Scroll by Blog Rudy Hartono --*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

8. Selesai, simpan template

Keterangan :
1. #E0F8E0 = menunjukkan kode warna dari bacgkround kotak Related Post (ganti menurut selera anda)
2. #EFFBEF = menunjukkan kode warna dari bacgkround kotak related post pada saat disorot mouse (ganti dengan warna kesukaan anda)

Sobat Anaktimor17 Blog sekian dulu pembahasan cara bikin Related Post dengan scroll di Blogspot, semoga bermanfaat dan selamat mencoba,Sobat jangan lupa komentarnya yah.