Monday, March 19, 2012

Cara Membuat Related Post di Blogspot

Chens Blog - Related post adalah kaitan artikel dengan tema atau kategori yang sedang ditampilkan saat itu dimana kaitan itu ditujukan pada berita yang dipilih pada label atau kategori. Sehingga dengan adanya skrip related post ini maka 5 postingan dari kategori yang sama akan ditampilkan linknya dibawah dari berita yang terbaca saat itu. seperti yang tampak pada blog sederhana ini,dimana selain Cara Membuat Related Post di Blogspot ini anda bisa melihat beberapa judul artikel kami sebelumnya dalam kategori yang sama yaitu Tips. 

Cukup menarik bukan? beberapa sumber web master menyebutkan jika dengan memasang related post ini bertujuan untuk meningkatkan view halaman, sehingga setiap pengunjung akan bisa lebih lama dalam blog tersebut karena memiliki banyak pilihan berita yang berkaitan. inilah tujuan untuk pemasangan dari related post pada blogspot. Saudara Web Master yang terhomat, cara cara ini mungkin telah anda terapkan sebelumnya atau bisa jadi lebih baik dari cara ini. Jadi, artikel ini bertujuan untuk mengingatkan anda yang newbie seperti saya yang harus selalu mengingat dan mengulang bila memerlukannya. 

Salam hormat saya untuk webmaster senior, semoga ini berguna untuk yang baru belajar seperti saya ini. Tidak lupa saya sampaikan terima kasih atas kunjunganya. inilah skrip dari cara membuat related post yang kami sebutkan diatas. 

cari kode </head> dan masukkan diatasnya kode berikut :

<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, bila tidak ada masalah. lanjutkan dengan mencari kode <data:post.body/> kemudian dibawahnya letakkan kode berikut :

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


Selamat Mencoba, semoga sukses...

12 comments:

  1. thx gan infonya.. uda aku coba dan sukses... siipp...

    ReplyDelete
  2. makasih sob, udah saya praktekin dan berhasil...

    ReplyDelete
  3. makasih gan infonya
    tpi bagaimana ya kalau di html blognya
    tidak ada
    mohon di jawab ya master
    salam kenal

    ReplyDelete
  4. Infonya sangat bermanfaat sekali Gan, terutama buat saya pribadi. Thanks dah share semoga makin exist az di dunia blogers.

    ReplyDelete
  5. kok aneh gan?
    ane ada 3?? yg mana yg ditaruh?? visit jga di sini mas :)

    ReplyDelete
  6. boleh juga nih dicoba, mudah2an pas dihati :)

    ReplyDelete
  7. oke terima kasih, sudah saya coba dan bisa :)

    ReplyDelete
  8. makasih bro
    dari smua yang aku coba hny artikel ini yg berhasil
    follow blog aku ntar follow back
    http://sharingcommunitysc.blogspot.com/
    thx btw :)

    ReplyDelete
  9. cara mengatur jumlah yang ditampilkan gimana gan,,, kontak kesini ya Kasax Kusux

    ReplyDelete
  10. Siiip gan, makasi gan. sangat membantu.

    ReplyDelete

Silahkan Berkomentar, Terkait Artikel ini...