Artikel Terkait Dengan Scroll

Artikel Terkait atau biasa dikenal oge' Related Comment yang cilembu mau share kan pake scroll, seperti yang sohib liat di bawah tutorial ini...manis kan?. Diluar sana banyak tutorial seperti ini, kalau yang ini sedikit di modifikasi sesuai selera cilembu. Okeh langsung kita yu...

1. Masuk Blog sohib sendiri...pasti. 
2. Edit HTML dan centang Exspand Template 
3. Cari Kode ]]></b:skin> supaya gampang ketemu pake Ctrl "F" 
4. Pasang Kode dibawah ini dan letakkan persis diatas kode no. 3 

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px; 

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

.rbbox:hover{background-color: rgb(255, 255, 255);} 

Perhati'in :
#f0f0f0 (Kode warna) bisa diganti sesuka sohib...cari kode warna silahkan klik disini
Langkah selanjutnya : 

1. Cari kode <data:post.body/> 
2. Paste Kode dibawah ini, dan pasang persis dibawah kode no. 1 
3. Yang berwarna merah bisa sohib ganti sesukanya. 
   Related Post: Artikel terkait dll
   200 : tinggi scroll
   4, 10 dan 3 bisa diganti
   Pratinjau...sudah manteP?
   ..simpen lah. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<H2> Related Post: </H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height: 200 px;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 = 10 ;
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++;
}
}
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>

Reaksi:

Related Posts: