Cara Membuat Related Post Dengan Checklist plus Fungsi Scroll

Banyak macam related posts / artikel terkait yang disajikan untuk blogspot, Nah pada kali ini juga saya akan memberikan tips Cara Membuat Related Post Dengan Checklist plus Fungsi Scroll. Tutorial ini juga tidak kalah menariknya dan yang pasti tampilannya keren seperti terlihat pada gambar dibawah ini juga dilengkapi scroll. Simak bagaimana cara membuatnya.

Membuat Related Post Dengan Checklist plus Fungsi Scroll
1. Login ke Blogger
2. Pilih Template
3. Pilih Edit HTML => Lanjutkan
4. Centang pada Expand Template Widget
5. Cari kode ]]></b:skin> dan letakan kode berikut diatasnya :

.rbbox
{
 font-family:Federant;
 background:#fff;
 border:1px solid #ccc;
 height:198px;
 overflow:auto;
 margin:10px 0 15px;
 padding:10px
}
.rbbox ul li:hover
{
 cursor:pointer;
 list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhA8KvZiHKOLBQdVg0FGiOG1oaHl13JM_AGTQgQ81cXy9cBH8m_BKM7fn5DuhPbGqrQ3xvIbOh4pI7lCq91ofVTOc3idvvJP3XVG6TMlIvfHBzCRN3OxCLUc8a3yjdy7_83IUjUXpC4Ew/s1600/checklis.png);
 color:#3B5998
}
.rbbox ul li
{
 list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkc1bRPljGEY40x-Lr04k0GeWgLj4EqqsO10_XVgVEKVTAbUjDi8eDyhmRl0g-Y5Ev0CSUOFAzqBkKXo4AapLD6bxa4OcwswOGumlJCMBgH3Wb9wouxHT03WoXELfLnRU0RDYwSg9Yx2o/s320/check.gif);
 padding:.5em 0 .5em .3em
}

6. Lalu cari kode : <data:post.body/></b:if>  atau <p><data:post.body/></p></b:if>
7. Kalau sudah lalu letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
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>

8. Simpan Template

Keterangan :
1. Apabila anda sudah pasang Read more maka pasti ada 2 kode <data:post.body/>, pilih kode yang kedua.
2. Atau bisa juga diletakkan di bawah kode <div class='post-footer-line post-footer-line-1'>

Nah selamat mencoba membuat related posts dengan checklist plus fungsi scroll, semoga bermanfaat.

Tweet