Brillian's Blog

Kali ini saya akan memposting mengenai Cara Membuat Related Post dengan Scroll.Tapi sebelumnya,saya akan menjelaskan sedikit tentang Manfaat Related Post dengan Scroll ini.Related Post atau bahasa Indonesianya adalah Artikel Terkait bertujuan untuk menambah jumlah page views atau Total tayangan Laman blog sobat.Dan untuk scrollnya berfungsi untuk menghemat tempat di blog sobat agar lebih rapi dan indah.

Cara ini sudah saya coba dan hasilnya ada di bawah postingan ini.Langsung saja,silahkan simak Tutorialnya dibawah ini :
1. Login ke akun blog anda
2. Pilih Template -> Lanjutkan -> Centang Expand template Widget
3. Cari kode <data:post.body/> (Gunakan Ctrl + F untuk mempermudah pencarian)
4. Setelah ketemu kode <data:post.body/> letakkan script di bawah ini tepat setelah/di bawah kode <data:post.body/>.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</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 = 9999;
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>


5. Kemudian, cari kode ]]></b:skin>. lalu copy script di bawah ini tepat diatas/sebelum kode ]]></b:skin>

 /*-- artikel terkait scroll by http://anggafirmansyah1.blogspot.com--*/
. rbbox {border: 1px solid #D8D8D8; padding: 5px;
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}