Cara Membuat Related Post Dengan Fs Scroll

Hai sobat t'Net...apa kabar hari ini?
sobata t'Net kali ini kita akan mempelajari bagaimna cara untuk menampilkan Relates Post  pada blog dengan fungsi scroll. diamana dalam blog kita nanti akan tampila related postnya dengan sistem scroll yang dapat kita atur sesuai dengan kemauan kita.
Nah sekarang langsung saja yah! Tapi sebelumnya kita lihat dulu gambar di bawah ini.

 

Gambar 1

Nah seperti gambar diataslah tampilan dari related post kita nantinya, sudah pada paham kan giman bentuknya?????

Kalao penasaran, ayo kita kerjakan..

• Masuk dengan Account saudara
• Pilih Rancangan
• Setelah itu pilih Edit HTML
• Cari code seperti ini: <p><data:post.body/></p> (Dengan Ctrl+F)
  
• setelah ketemu, letakkan kode di bawah ini tepat 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>

Tulisan:
Related Post, silhkan anda ganti dengan bahasa anda sendiri.

• Lalu cari code seperti ini: ]]></b:skin>
• Dan letakkan code di bawah ini di atas kode ]]></b:skin>

/*-- Related Post dengan Scroll Ka Damar--*/

    .rbbox{border: 1px solid #D8D8D8;padding: 5px;

    background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}

    .rbbox:hover{background-color: #EFFBEF;}

•  background-color: #E0F8E0; kode  #E0F8E0 adalah kode warna bacgkround kotak related post. Sobat bisa ganti kodenya
• .rbbox:hover{background-color: #EFFBEF;} kode  #EFFBEFadalah kode warna bacgkround kotak related post pada saat disorot dengan mouse (hover). Sobat bisa ganti kodenya
• Setelah itu, silahkan anda Simpan Template