Tuesday, July 13, 2010

Gadget Related Post Dengan Fitur Scrolling Dan Tanpa Thumbnail

Berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.
jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".

Related Post adalah widget daftar artikel yang masih terkait dengan artikel yang sedang dibaca pada saat itu dan biasanya terletak langsung dibawah artikel tersebut.


Langkah-langkahnya sbb :

1. Login ke blogger > rancangan > edit html > edit template, centang expand template widget.

2. Backup dahulu template ke notepad.

3. Ctrl F lalu cari kode ini "</head>".

4. Copy kode dibawah ini diatas kode "</head>" tsb.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5. Paste seperti contoh dibawah ini.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

</head>

6. Kemudian cari kode ini "<data:post.body/>" seperti langkah ke-3 diatas lalu copy lagi kode dibawah ini sesudahnya.
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>



7. Paste seperti contoh dibawah ini.
<data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>


Hitam. 
Tutorial blogging lainnya : Gantilah judulnya sesuai keinginan.
"max-results=5" : Nilai ini untuk menentukan banyak artikel terkait yang akan ditampilkan.

Biru.
Ini untuk membuat border kolom pada artikel terkait.

Hijau.
Ini untuk fitur Scrolling.


8. Simpan template & reload blognya.



Selamat Mencoba.