Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll

Artikel terkait model scroll ini berfungsi agar tampilan blog kita jadi lebih menarik dan tidak mengganggu pemandangan blog kita, Karena jika artikel terkait kita yg di tampilkan berjumlah banyak maka artikel terkait kita akan menjulur kebawah dan itu akan sangat mengganggu pemandangan blog kita..

Sebagai contoh lihat artikel terkait yang dibawah postingan ini

Untuk membuat artikel terkait model scroll seperti ini, ikuti caranya berikut ini:

1. Klik RANCANGAN kemudian Edit HTML

2. Jangan lupa centang Expand Widget Template
dan tunggu beberapa saat sampai proses selesai...

3. Cari tulisan ]]></b:skin>

copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

.rbbox { border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: #222222;-moz-border-radius:5px; margin:5px;}
.rbbox:hover { background-color: rgb(255, 255, 255);}


background-color:#22222; adalah warna background atau latar belakang artikel terkait, sobat bisa menggantinya dengan warna yg sobat inginkan, jika sobat ingin mengetahui jenis jenis kode warna silahkan Klik Disini

4. Kemudian cari <data:post.body/>
Copy kode dibawah ini dan pastekan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Baca Terkait Lainnya..</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 = 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++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5. Simpan

height:200px; adalah tinggi kotak scroll yg ingin di tampilkan dalam blog, sobat bisa menggantinya sesuai keinginan sobat...

Selesai.. Semoga bermanfaat...




Sumber: http://lovelizzers.blogspot.com/2011/06/membuat-artikel-terkait-related-post.html

Label/Kategori: Tutorial Blog

Baca Terkait Lainnya..