jQuery Google Data API Related Posts - Artikel Terkait Versi 5.0

Dari beberapa artikel yang membahas tentang cara memasang artikel terkait atau related posts blogger, widget versi inilah yang paling simple dan relatif mudah untuk diterapkan ke blogger. Karena cukup dikonfigurasi dengan widget HTML/JavaScript, widget artikel terkait ini sudah bisa tampil di blog.

jQuery Logo

Satu hal yang membuat widget ini unik adalah ketika masuk pada halaman utama blog, widget ini tidak menampilkan arttikel terkait, melainkan recent posts atau postingan terbaru. Widget related posts atau artikel terkait akan tampil ketika kita mengakses halaman artikel. Satu kali installasi, dua widgetpun terpasang.

Intallasi Artikel Terkait Blogger Pada Sidebar

1. Log in ke Blogger » Tata Letak » Tambahkan Gadget » HTML/JavaScript

Tambahkan Gadget - Blogger

2. Copy kode JavaScript berikut kemudian masukkan pada gadget HTML/JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Keterangan:
Untuk menhindari duplikasi judul gadget, nama gadget tidak perlu diisi
Untuk mengganti judul widget, ganti kalimat Artikel Terkait pada baris kode no.6

3. Klik tombol Simpan dan preview blog Anda

Intallasi Artikel Terkait Blogger di Bawah Artikel Blog

1. Log in ke Blogger » Tata Letak » Tambahkan Gadget » HTML/JavaScript

Tambahkan Gadget - Blogger

2. Copy kode JavaScript berikut kemudian masukkan pada gadget HTML/JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Keterangan:
Untuk menghindari duplikasi judul gadget, nama gadget tidak perlu diisi
Untuk mengganti judul widget, ganti kalimat Artikel Terkait pada baris kode no.7

3. Klik tombol Simpan dan preview blog Anda

Sekilas tidak ada perbedaan yang mencolok antara pemasangan widget artikel terkait blogger pada sidebar dengan artikel terkait blogger di bawah posting artikel. Akan tetapi jika diperhatikan lagi pada script Intallasi Artikel Terkait Blogger di Bawah Artikel Blog terdapat penambahan kode sebagai berikut:

Jadi secara otomatis widget akan tampil berdasarkan container selector yang terintegrasi pada script, dalam hal ini div.post-body sehingga tanpa perlu mengedit template pun widget akan tampil di bawah postingan artikel blog.

Penambahan Kode CSS

1. Cari kode berikut

]]></b:skin> 

2. Copy kode CSS berikut kemudian letakkan di atas kode pada langkah no.1

/* jQuery Google Data API Related Posts
----------------------------------------------- */
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCCCCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #223344;
color:#223344;
font:bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBBBBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}

Keterangan:
Anda bisa mengedit kode CSS di atas supaya lebih sesuai dengan tampilan blog Anda

Jika Anda ingin menjadikan satu kode CSS dan kode JavaScriptnya, supaya lebih mudah dalam proses installasi widget dan lebih efisien berikut contoh kodenya.

<style type="text/css">
/* jQuery Google Data API Related Posts
----------------------------------------------- */
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCCCCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #223344;
color:#223344;
font:bold 100% &#039;Trebuchet MS&#039;,Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBBBBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hensblog.googlecode.com/files/new_relpost_pack.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Selamat mencoba semoga berhasil.

Bagi Anda yang ingin memakai hosting sendiri untuk menyimpan file JavaScriptnya, berikut sourcecodenya.

/*  Author : Mike @ moretechtips.net
 Blog : http://www.moretechtips.net
 Project: http://code.google.com/p/blogger-related-posts
 Copyright 2009 [Mike@moretechtips.net] 
 Licensed under the Apache License, Version 2.0 
 (the "License"); you may not use this file except in compliance with the License. 
 You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 
 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. 
*/
function relatedPostsWidget(userOp){
 (function($){ 
  var op = {
   'blogURL':''
   ,'maxPosts':5
   ,'maxTags':5
   ,'maxPostsPerTag':5
   ,'containerSelector':''
   ,'tags':null
   ,'loadingText':''
   ,'loadingClass':''
   ,'relevantTip':''
   ,'relatedTitle':'Related Posts'
   ,'recentTitle':'Recent Posts'
   ,'postScoreClass':''
   ,'onLoad':false
  };
  op = $.extend({}, op, userOp);
  var tagsLoaded = 0,div= null,ul=null;
  // If no contianer selected , will create div in place of script call
  if (!op.containerSelector) {
   document.write('<div id="related-posts"></div>');
   op.containerSelector = '#related-posts';
  };
  // Tag json posts are loaded
  var tagLoaded = function(json,status){
   tagsLoaded++;
   if(json.feed.entry) {
    for (var i=0; i<json.feed.entry.length; i++) {
     var entry = json.feed.entry[i];
     var url='';
     for (var k=0; k<entry.link.length; k++) {
      if(entry.link[k].rel=='alternate') {
       url = entry.link[k].href;
       break;
      };
     };
     var title = entry.title.$t;
     //Ignore current url
     if(location.href.toLowerCase()!= url.toLowerCase()) addPost(url,title);
    };
   };
   // Loading posts of all tags is done
   if(tagsLoaded>=op.tags.length) {
     ul.attr('class','');
     $('#related-posts-loadingtext',div).remove();
     // Hide extra posts if maxPosts >0
     if(op.maxPosts>0) $('li:gt('+ (op.maxPosts-1) +')',ul).remove();
   };
  };
  // Add post and re-order
  var addPost = function(url,title) {
   //current LI items inside of UL
   var list = $('li',ul);
   for(var i=0; i<list.length; i++) {
    //get score
    var a= $('a', list.eq(i) );
    var sc = getScore(a);
    //Post exists ?
    if(a.attr('href')==url) {
     //Yes : Then increment score
     setScore(a,++sc);
     //Re-order : compare with prevoius li items
     for(var j=i-1; j>=0; j--){
      // find the item with higher score than current
      var jA= $('a', list.eq(j) );
      if (getScore(jA)>sc) {
       // re-order if only there are items in the middle to appear before
       if(i-j>1) list.eq(j).after(list.eq(i));
       return;
      };
     };
     // If no higher item then this one should go first
     if(i>0) list.eq(0).before(list.eq(i));
     return;
    };
   };
   //Add new post
   ul.append('<li><a href="'+url+'" title="'+(op.relevantTip? op.relevantTip.replace('d',1):'')+'">'+title+'</a></li>');
  };
  // parse score from attribute
  var getScore = function(a){
   var score = parseInt(a.attr('score'));
   return score>0? score : 1;
  };
  // set score from attribute
  var setScore = function(a,sc) {
   a.attr('score',sc);
   if(op.relevantTip) a.attr('title',op.relevantTip.replace('d',sc)); 
   if(op.postScoreClass) a.attr('class',op.postScoreClass+sc); 
  };
  // init 
  var initRelatedPosts = function() {
   // append my div to user selected container 
   if(op.containerSelector != '#related-posts'){
    var container = $(op.containerSelector);
    // check contianer is there and only one for pages like home
    if (container.length!=1) return;
    div = $('<div id="related-posts"></div>').appendTo(container);
   }
   else div = $(op.containerSelector); // div which I wrote on document
   
   // get tags if wasn't preset
   if (!op.tags) {
    op.tags = [];
    $('a[rel="tag"]:lt('+op.maxTags+')').each(function () {
     var tag= $.trim($(this).text().replace(/n/g,''));
     if($.inArray(tag,op.tags)==-1) op.tags[op.tags.length]=tag;
    });
   };
   // should make recent posts but no recent title :exit
   if(op.tags.length==0 && !op.recentTitle) return;
   
   //add recent posts title
   if(op.tags.length==0) $('<h2>'+op.recentTitle+'</h2>').appendTo(div);
   //add related posts title if any
   else if(op.relatedTitle) $('<h2>'+op.relatedTitle+'</h2>').appendTo(div);
   
   //Add loading text if any
   if(op.loadingText) $('<div id="related-posts-loadingtext">'+op.loadingText+'</div>').appendTo(div);
   // Appending UL with loading class if selected
   ul= $('<ul '+(op.loadingClass? 'class="'+ op.loadingClass+'"':'')+'></ul>').appendTo(div);
   
   //recent posts
   if(op.tags.length==0){
    $.ajax({url:op.blogURL+'/feeds/posts/summary/'
      ,data:{'max-results':op.maxPostsPerTag,'alt':'json-in-script'}
      ,success:tagLoaded
      ,dataType:'jsonp'
      ,cache:true });
   // Tags found , do related posts widget
   }else{
    // Requesting json feeds for each tag    
    for(var t=0; t<op.tags.length;t++) 
     $.ajax({url:op.blogURL+'/feeds/posts/summary/'
       ,data:{'category':op.tags[t],'max-results':op.maxPostsPerTag,'alt':'json-in-script'}
       ,success:tagLoaded
       ,dataType:'jsonp'
       ,cache:true });
   }; 
  };
  // Call init on document ready
  if(op.onLoad) $(window).load(initRelatedPosts);
  else $(document).ready(initRelatedPosts);
 })(jQuery);   
}

—ς∞ς—

sumber: http://modification-blog.blogspot.com

Tweet

Postingan terkait:

Ditulis EM — Wednesday, 17 April 2013 — Add Comment — Blogger, Blogger Widgets, jQuery