Cara Membuat Recent Post (JQuery) bagian ke 2

Pada posting yang berikutnya akan membahas tentang " bagaimana membuat Cara Membuat Recent Post (JQuery) bagian ke 2, Carabekerjanya tidak jauh berbeda dengan postingan yang pertama, di sini ada perbedaan sedikit pada Recent Post (JQuery) pertama, cara kerjannya dari bawah ke atas sedangkan Recent Post (JQuery) bagian ke 2, sebaliknya dan, imagenya pun terletak di sebelah kiri.

COPY CODENYA

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #spylist ul{ width:255px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:200; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:50px; overflow: hidden; background:#F2F5A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0CWDhiRdPBuUt60WE3KLevKxbQrk8JC1q7RJLjhmg0ewPDjKWi3wjoyz3cHq9WDuZRS4-PTxbp8X7u3o8M0rCs6Wn7S2LUQCjEIZFQRlF0Qnf0x7HRh_meuyNt3TR18RqLv5mzwpjEBz/s1600/Snapshot_739.png) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:13px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style>     <script language='javascript'> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 300; cellspacing =5; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 60; thumbheight = 60; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "Reply(s)"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://create-freeblogs-n-widgets.blogspot.com/"; limitspy=5 intervalspy=6000 </script> <div id="spylist">     <script type='text/javascript'> //<![CDATA[  /*  */ jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>'); //]]> </script> </div>

Perhatikan bahwa:

Code yang berwarna merah dan warna hijau,harus di ganti dengan punya Anda, seperti code.

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0CWDhiRdPBuUt60WE3KLevKxbQrk8JC1q7RJLjhmg0ewPDjKWi3wjoyz3cHq9WDuZRS4-PTxbp8X7u3o8M0rCs6Wn7S2LUQCjEIZFQRlF0Qnf0x7HRh_meuyNt3TR18RqLv5mzwpjEBz/s1600/Snapshot_739.png)

 jangan lupa! Ini harus diganti dengan image milk Anda , untuk latar belakang Recent Post Anda jika, tanpa ini ! Tidak akan muncul Recent Post tersebut.

>height: 400px <, untuk ukuran tinggi. Sedangkan code berikutnya.> #spylist ul{ width:255px;< ini menunjukkan lebar


Code ini pun harus diganti dengan URL blog Anda:
>home_page = "http://create-freeblogs-n-widgets.blogspot.com/"; limitspy< Agar semua posting terbaru dapat muncul sebagai blog Anda

Berapa barapa banyak yang ditampilkan? Ini juga bisa Anda atur untuk kemunculan di Recent Post
seperti code >cellspacing =5;< bisa diganti dengan kiinginan Anda, dan harus disamakan jumlahnya dengan kode >limitspy=5<