Ads 468x60px

Minggu, 08 April 2012

Cara Membuat related post terbaru

Related post atau juga di sebut artikel terkait sangat berguna sekali, baik bagi pembaca, pengunjung, ataupun bagi para blogger sendiri. dengan adanya related post atau artikel terkait, para pengunjung juga bisa membaca artikel yang berhubungan  dengan artikel yang sedang di baca, karenanya mungkon saja para pengunjung akan lebih lama di blog kita. pada menu related post ini akan muncul judul judul artikel sesuai dengan labelnya masing masing. biasanya menu related post ini berada di bawah postingan.Nah apakah anda masih tertarik.? Bagaimana caranya..? ikuti langkah langkah berikut
  • Tentunya langkah pertama adalah log in ke akun blogger anda
  • Setelah itu masuk menu template > Edit HTML
  • Untuk berjaga jaga kemungkinan gagal, download template lengkap terlebih dahulu
  • Cari kode </head> copy kode di bawah ini dan letakan di atas kode </head>
    <style>
     #related-posts {
     float : left;
     width : 540px;
     margin-top:20px;
     margin-left : 5px;
     margin-bottom:20px;
     font : 13px Arial;
     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 : #f1c232;
     font-size : 20px;
     font-weight : normal;
     margin : 5px 7px 0;
     padding : 0 0 5px;}
     #related-posts a {
     color : #b45f06;
     font-size : 12px;
     text-decoration : none;}
     #related-posts a:hover {
     color : #00ff00;
     text-decoration : none;}
     #related-posts ul {
     border : medium none;
     margin : 10px;
     padding : 0;}
     display : block;
     margin : 0;
     padding-top : 0;
     padding-right : 0;
     padding-bottom : 1px;
     padding-left : 16px;
     margin-bottom : 5px;
     line-height : 2em;
     border-bottom:1px dotted #ffffff;}
     </style>

     <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>
  • Selanjutnya, cari kode <data:post.body/> kemudian  letakkan kode berikut dibawahnya:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <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> 
Sekian tutorial blog dari saya, mungkin tutoroal ini bukan berarti apa apa bagi mereka para blogger profesiinal, tapi sebagai blogger pemula saya juga ingin berbagi setiap ilmu baru yang saya dapatkan. semoga tutorial ini bermanfaat, khususnya bagi para pemula seperti saya ini.