Membuat Related Post Model SCROLL di Blogspot

Beruntunglah teman2 para pengguna wordpress yang notabene menyediakan berbagai fasilitas plug-in, tapi bagi pengguna blogspot, beberapa script tambahan harus dibubuhkan secara manual pada file .html-nya. Salah satu plug-in yang cukup populer di kalangan blogger adalah fasilitas Related Posts. Alasan utama menggunakan Related Posts tentu saja untuk memudahkan pembaca menemukan artikel2 yang memiliki tema/topic serupa dengan postingan yang sedang dibaca.

Bagi teman2 pengguna blogspot yang ingin menambahkan Related Posts di bawah postingannya, tutorial berikut ini bisa diterapkan. Related Posts (Postingan Terkait) berikut ini dibuat dalam bentuk scroll. Dengan scrolling, tentunya tampilan blog kita bisa menjadi lebih lengkap, informatif, dan rapi.

1. Sebelumnya backup dulu template teman2 dengan mendownloadnya (untuk berjaga-jaga kalau tidak berhasil, teman2 dapat mengembalikan template asli).
2. Login blogger >> layout >> edit html
3. Beri tanda centang pada Expand Template Widget.
4. Silahkan teman2 cari kode berikut dalam html teman2

]]></b:skin>

(gunakan tomblo Ctrl + F untuk pencarian)

5. Pastekan script berikut diatas kode tadi (pada nmr 4) :

/* Related Post */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;
font-size:small;
color:#cc6600;
background:#f1f1f1;
clear:both;
float:left;
width:450px;
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}

#underpost h2{
font-family:’Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif;
font-size:large;
color:#003300;
margin-bottom:5px;
border-bottom:1px solid #cccccc;
padding:0 0 5px;
}

#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#cc6600;
text-decoration:none;
}

#underpost a:hover{
text-decoration:underline;
}

#artikel-terkait{
overflow:auto;
width:auto;
height:200px;
padding:10px;
}

6. Langkah selanjutnya cari kode berikut

<p><data:post.body/></p>

7. Pastekan script berikut dibawah kode tadi (nomer 6)

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div id=’underpost’>
<div class=’similiar’>

<div class=’widget-content’>
<h2>Artikel Menarik Lainnya</h2>
<div id=’artikel-terkait’>
<div id=’relposts’/><br/><br/>
<script type=’text/javascript’>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
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;relposts&#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>
</div>

</div>
</div>
</b:if>

8. Terakhir simpan dan lihat hasilnya, untuk mengembalikan template seperti semula silahkan upload kembali template asli yang telah didownload pada awal tadi (nomor 1).

Silahkan mencoba... (Sumber dari sini)

Artikel Menarik Lainnya