Blogger Related Post : Cara Pasang Artikel terkait di bawah postingan

Design tampilan sebuah blog adalah segalanya buat saya, terkadang lebih  diutamakan designnya dari segi warna dan tata letak layout dari pada memposting sebuah artikel yang bermanfaat.

Banyak sekali bahan ispirasi untuk men-desaign halaman sebuah blog, terkadang apa yang kita inginkan tidak sesuai dengan hasilnya. sebagai contoh kita ingin memasang sebuah accessories related post / postingan terkait yang terpasang cantik dan rapi di halaman blog master seperti kolom-tutorial dan O-om.com.

Sebenernya ada banyak model Related Post namun saya akan memberikan contoh bagai mana cara memasang artikel terkait beradasarkan label di bawah postingan. Ok kita mulai saja!

1. Login account blogger → Layout → Edit HTML → centang Expand Widget Templates
2. Copy code di JavaScript dibawah ini di ataran ]]></b:skin> dan </Head>

<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>

3. Copy code CSS di bawah ini di atas ]]></b:skin>

/* Related Post
----------------------------------------------*/
#related-posts {
float : left;
width : 585px;
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://www.pronetter.com/file/newconcept_bullet.png") 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;}

4. Cari code di bawah ini (Ctrl + F2)

<b:loop values='data:post.labels' var='label'> 
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> / </b:if>


</b:loop>

5. Copy code di bawah ini, kemudian paste di atara code warna Hijau dan Merah di atas (4)

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

6. Sekarang Anda scrool kebawah sampai anda menemukan code berikut </span> dan </div>
7. Copy code di bawah ini di antara code warna Hijau dan Merah di atas(N0.6)

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h2>Other Recommended Posts</h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

8. Jangan lupa tambahkan code </b:if> di bawah code </div> sehingga hasilnya tampak seperti di bawah ini:

</span>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h2>Other Recommended Posts</h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>

9. Simpatn template Finish dan lihat hasilnya

Catatan : Apabila ada kesalahan atau error coba Anda baca mungkin Anda kurang menambahan tag </b:if> atau </div>.

Anda sudah mengikuti langkah-langkah di atas namun hasil belum maksimal, silahkan post disini saya akan coba membantunya. Terima kasih semoga bermanfaat.