Membuat Related Post dengan Efek Ceklis

Assalamuallaikum Wr Wb selamat malam sobat blogger semua pada kali ini saya akan share tutorial blogger lagi yang berjudul Membuat Related Post dengan Efek Ceklis. sebenarnya tutor ini adalah request dari sahabat saya. Langsung saja kita lihat screenshotnya

1. Buka Dasbor >> Template >> Edit HTML >> Lanjutkan >> Beri centang pada Expand Template Widget

2. Cari kode ]]></b:skin> atau bisa juga </style> dan letakan kode berikut di atasnya :

.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(http://4umi.com/image/icon/check.png);
color:#3B5998
}
.rbbox ul li
{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUgidBPg2ZNaBM9syG3lRa8-hdM1w-SgtjLtB5sy0w9mqlbGp-3F_e2Oatm5yth8jLvQdSb7EL_Sy0et1Y41mayHxNb7aA6LYxmX6uv9WzVvcCnV6bniqPKfoBeJwifUbWMO03q4bqLo/s12/uncheck.gif);
padding:.5em 0 .5em .3em
}

3. Lalu cari kode : <data:post.body/>  bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang  pertama  lalu copy kode berikut ini  di bawah kode <data:post.body/>

<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>

5. Simpan Template Sobat

Catatan : 

• Jika Nanti Related Post diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' lebih tepatnya di bawah tag </b:if>.
• Atau sobat juga bisa meletakan kode kode di atas di bawah kode <div class='post-footer-line post-footer-line-1'>

Sekian tutorial dari saya semoga dapat bermanfaat.