Cara Membuat Related Post Dengan Efek Check List

Cara Membuat Related Post Dengan Efek Check List → Bertemu lagi dengan saya dan kali ini saya ingin berbagi Cara Membuat Related Post Dengan Efek Check List langsung aja.

1. login ke akun blogger anda

2. edit HTML

3. cari kode ]]></b:skin> salin kode css di bawah ini dan letakan tepat di atas kode ]]></b:skin>

.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/AVvXsEhjtfY3AJrzAcPK6gM9PTDBXPxmc-vzVRG28cbqZSNXzAQHFmfNHv9hnLrZFCRjAgNhvCuPnC_33bIFe0XBdue4Q-FmnQwG3IJIfGInGIbPzZKbtEpt0PYb_BcymTMlM-wA-JEm-zXL1T0/s12/uncheck.gif);
 padding:.5em 0 .5em .3em
}

4. Selanjutnya cari kode <data:post.body/> lalu salin kode di bawah ini lalu letakan 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. Save TEMPLATE anda.

Catatan:

Jika Nanti Related Post Tidak Muncul dibawah Posting anda, maka kode NO 4 sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' lebih tepatnya di bawah tag </b:if>.

Atau sobat juga bisa meletakan kode kode NO 4 di bawah kode <div class='post-footer-line post-footer-line-1'>

jika berhasil hasilnya seperti gambar di bawah ini

Semoga Cara Membuat Related Post Dengan Efek Check List bisa memperindah blog agan2 semua.