Cara Membuat Auto Scroll Recent Post Blogger Plus Thumbnails

Salah satu widget utama dalam sebuah blog adalah widget Recent Post atau Posting Terbaru, dengan menampilkan daftar post terbaru, pengunjung yang masuk bukan dari halaman utama dapat mengetahui posting-posting terbaru secara langsung.

Selain sebagai navigasi suatu blog, recent post yang satu berbeda dengan recent post lainnya, selain memiliki tampilan yang menarik recent post yang satu ini mempunyai kelebihan Auto Scroll. Dengan adanya auto scroll pada recent post ini bila kalian memasangnya bisa menjadikan tampilan blog Sobat menjadi lebih apik dan menarik untuk dilihat oleh pengunjung, selain itu bisa mengundang pengunjung untuk mengetahui post-post lainnya dan alhasil jumlah pageview pun akan bertambah. Bila Sobat tertarik untuk memasangnya bisa ikuti cara dan scriptnya dibawah ini :

Langkah Pertama.

• Masuk ke Rancangan -> Elemen Laman -> Tambah Gadget
• Pilih HTML/Javascript - Copy Paste scripts dibawah ini
  

  <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:345px;
  }
  #spylist ul{
  width:332px;
  overflow:hidden;
  list-style-type: none;
  padding: 0px 0px;
  margin:0px 0px;
  }
  #spylist li {
  width:290px;
  padding: 5px 5px;
  margin:0px 0px 5px 0px;
  list-style-type:none;
  float:none;
  height:70px;
  overflow: hidden;
  background:#FFC7AD repeat-x;
  border:1px solid #C33F00;
  }
  
  #spylist li a {
  text-decoration:none;
  color:#4B545B;
  font-size:11px;
  height:18px;
  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] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[1] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[2] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[3] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[4] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  showRandomImg = true;
  boxwidth = 300;
  cellspacing = 6;
  borderColor = "#232c35";
  bgTD = "#000000";
  thumbwidth = 60;
  thumbheight = 60;
  fntsize = 12;
  acolor = "#666";
  aBold = true;
  icon = " ";
  text = "comment";
  showPostDate = false;
  summaryPost = 40;
  summaryFontsize = 10;
  summaryColor = "#666";
  icon2 = " ";
  numposts = 10;
  home_page = "http://mas-amien.blogspot.com/";
  limitspy=5
  intervalspy=6000
  </script>
  
  <div id="spylist">
  <script type='text/javascript'>
  //<![CDATA[
  /*
  * mas-amien.blogspot.com
  */
  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>
  <br />
  <span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-auto-scroll-recent-post.html" target="_blank">Recent Post</a></span>

• Kemudian Klik Simpan

NOTE :

• Ganti http://mas-amien.blogspot.com/ dengan alamat blog kalian dan pastikan ada tanda slash ( / ) di belakang alamat blog.
• boxwidth = 300 adalah lebar widget dalam pixel (px), sesuaikan dengan lebar sidebar blog kalian.
• text = "comment" adalah teks di belakang jumlah komentar, kalian bisa menggantinya dengan kalimat yang sesuai.
• numposts = 10; adalah jumlah posting terbaru yg akan muncul dalam widget
• limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, kalian bisa mengganti jumlahnya
• intervalspy=6000 adalah kecepatan scroll/spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

Selamat Mencoba....semoga bermanfaat

Cara Membuat Auto Scroll Recent Post Blogger Plus Thumbnails