Cara Membuat Related Post atau Artikel Terkait dengan Scroll Cantik

Tahukah kamu apabila related Post akan membuat Blog menjadi User Friendly ? Pengaruh kedapa SEO juga mempengaruhi, selain itu Pengunjung juga bisa berlama-lama surving membaca artikel-artikel Blog. Related Post atau Artikel Terkait ini juga dilengkapi Scroll yang Cantik, sehingga pengunjung akan terpesona melihat Artikel Terkait ini.

Artikel Terkait atau Related Post ini juga bisa kamu lihat langsung di gambar bawah atau lihat Ending Artikel Pengamat sepakbola. Terdapat tampilan Artikel Terkait yang bisa di baca dengan tampilan Scroll yang ciamik pula.

Related Post/Artikel Terkait dengan Scrollbar Cantik

• Temukan Kode ]]></b:skin> , lalu Tempatkan Kode CSS berikut diatasnya:

/* Related Post/Artikel Terkait */
.rbbox{border: 0px solid #EFFBEF;padding: 10px;
background-color: #A9E2F3;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
::-webkit-scrollbar {width:12px;height:12px;}
::-webkit-scrollbar-track {background:#D2D2D2;box-shadow:inset 1px 1px 5px #939393;border:1px solid #A9A9A9;}
::-webkit-scrollbar-thumb {background:#888;border:1px solid #464646;border-radius:2px;box-shadow:inset 2px 2px 5px 0 #B0B0B0}

• Temukan kode <data:post.body/> lalu masukkan Kode ini di bawahnya:

(Jika Text Terputus Iklan , maka klik http://txtup.net/6MBwE untuk melihat)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div style='margin:0; padding:1px;height:150px;overflow:auto;border:0px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
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>

(Jika Text Terputus Iklan , maka klik http://txtup.net/6MBwE untuk melihat)

• Simpan Template. Maka hasilnya akan sepert ini:

Kamu sudah berhasil menambahkan Related Post atau Artikel Terkait dengan Scroll Cantik di bawah postingan dengan mudah dan sangat menarik. Selamat mencoba!