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/JavaScriptTambahkan 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/JavaScriptTambahkan 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% '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; } </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); }
—ς∞ς—
Belum ada tanggapan untuk "jQuery Google Data API Related Posts - Artikel Terkait Versi 5.0"
Post a Comment
Note :
1. Berikan komentar Anda yang sesuai dengan isi artikel
2. Berkomentarlah dengan bijak dan mohon untuk tidak melakukan SPAM
3. Jangan menempelkan link hidup, karena tidak akan ditampilkan
Semoga tali Silaturrahmi kita terus terjalin dengan saling berbagi informasi
Regards,
Admin Ellmoo Blog