Memasang Artikel Terkait Blogger Versi 1.0 (Related Posts Blogger v1.0)

Sebuah tutorial mengenai cara memasang artikel terkait blogger kembali saya posting ulang sebagai arsip jika suatu saat saya membutuhkan inti dari artikel ini. Sebelumnya saya telah memposting hal yang sama mengenai artikel terkait blogger, hanya saja kali ini beda versi.

Jika kemarin saya menulis mengenai cara memasang artikel terkait blogger versi classic, sekarang saya menulis tentang cara memasang artikel terkait blogger versi 1.0, dan semua tutorial ini masih dari sumber yang sama, modification-blog.blogspot.com, terima kasih mas Hendriono yang telah bekerja keras mengembangkan widget ini.

 Artikel Terkait Blogger Versi 1.0 (Related Posts Blogger v1.0)

Installasi Artikel Terkait versi 1.0 ke Blogger

1. Log in ke Blogger » Template » Backup template (direkomendasikan)

Backup Template Blogger

2. Klik Edit HTML » cari kode berikut (CTRL+F)

]]></b:skin>

3. Copy kode CSS berikut kemudian letakkan di atas kode pada langkah No. 2

/* Related Posts Blogger v1.0
----------------------------------------------- */
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://dedehendriono.googlepages.com/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Keterangan:

Anda bisa mengedit kode CSS di atas sesuka hati supaya sesuai dengan template Anda, misalnya mengganti url icon pada baris kode No.40

4. Cari kode di bawah ini (CTRL+F)

</head>

5. Copy kode berikut kemudian letakkan tepat di atas kode pada langkah No.4

<script src='http://dienuhui.googlecode.com/files/artikelterkait.js'/>

6. Cari kode di bawah ini (CTRL+F)

<data:post.body/>

7. Copy kode XML berikut kemudian letakkan tepat di bawah kode pada langkah No.6

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'>
<b>Artikel Terkait : </b>
</font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Keterangan:

• perhatikan baris kode no.4 <div id="related-posts">, anda bisa merubah kalimat related-posts dengan kalimat Anda sendiri
• pada baris kode no.11 terdapat angka 5 yang artinya bahwa artikel yang akan ditampilkan pada widget sejumlah 5 artikel, ubah nilai 5 ini sesuai dengan keinginan Anda

8. Simpan pengaturan template dan preview

Berikut adalah source code JavaScript Artikel Terkait versi 1.0 Blogger

//<![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>');
}
//]]>

sumber: http://modification-blog.blogspot.com/2009/03/membuat-artikel-terkait-related-post.html

Tweet

Postingan terkait:

Ditulis EM — Tuesday, 16 April 2013 — Add Comment — Blogger, Blogger Widgets