Recent Posts Thumbnail With Scrolling Widget

Bagaimana cara membuat recent post ini? Sebelum membahas Cara Membuat Recent Posts, terlebih dahulu kita harus mengetahui pengertian dari Recent Posts ini.

Recent Posts dibuat untuk menampilkan beberapa judul sebuah posting terbaru yang up to date pada halaman blogger. Recent Posts ini bisa ditempatkan diamanapun, sesuai dengan kesukaan Anda. Apabila pengunjung sedang berada di suatu artikel posting kita namun dia ingin mengetahui artikel terbaru tanpa melalui halaman Homepage maka pengunjung akan mencari keberadaan Recent Posts yang terpasang di salah satu Widget Anda.

Recent Post ini ditambahi Scrolling Widget agar dapat bergerak kebawah dan melihat artikel terbaru sebelumnya. Berikut Cara Membuat Recent Posts With Thumbnail and Scrolling :

1. Login ke Blogger.
2. Masuk Ke Tata Letak.
3. Pilih tempat mana yang ingin anda taruh Widget Recent Posts ini.
4. Klik Add a Gadget / Tambah Widget
5. Pilih HTML/Javascript
6. Copy kode dibawah ini dan masukkan kodenya. Lalu Save.

<style type="text/css">
#mediablogger-widget {
  overflow:hidden;
  margin-top:5px;
  padding:0 0;
  height:385px;
}

#mediablogger-widget ul {
  width:295px;
  overflow:hidden;
  list-style-type:none;
  padding:0 0;
  margin:0 0;
}

#mediablogger-widget li {
  width:282px;
  padding:5px 5px;
  margin:0 0 5px 0;
  list-style-type:none;
  float:none;
  height:80px;
  overflow:hidden;
  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvI_LgrFcSU_f4Y_UEYc0CxuV80bXqFFGeSpGJ4J459r3X_OW8y_KNgSfcRItkQIXuv83nbXRJcw1b9MXtqdvB6RQcJ-sHTTbe63EazwcVGrhWQ084ikWHwsxyoNnRgXv21vPbm0ToorE/s1600/helperblogger.com-post.jpg) repeat-x;
  border:1px solid #ddd;
}

#mediablogger-widget li a {
  text-decoration:none;
  color:#4B545B;
  font-size:15px;
  height:18px;
  overflow:hidden;
  margin:0 0;
  padding:0 0 2px 0;
}

#mediablogger-widget img {
  float:left;
  margin-top:10px;
  margin-right:15px;
  background:#EFEFEF;
  border:0;
}

#mediablogger-widget img {
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  transition:all 0.5s ease;
  padding:4px;
  background:#eee;
  background:-webkit-gradient(linear,left top,left bottom,from(#eee),color-stop(0.5,#ddd),color-stop(0.5,#c0c0c0),to(#aaa));
  background:-moz-linear-gradient(top,#eee,#ddd 50%,#c0c0c0 50%,#aaa);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
}

#mediablogger-widget img:hover {
  -moz-transform:scale(1.2) rotate(-350deg);
  -webkit-transform:scale(1.2) rotate(-350deg);
  -o-transform:scale(1.2) rotate(-350deg);
  -ms-transform:scale(1.2) rotate(-350deg);
  transform:scale(1.2) rotate(-350deg);
  -webkit-box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1);
  -moz-box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1);
  box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
  overflow:hidden;
  font-size:10px;
  color:#0284C2;
  padding:2px 0;
  margin:1px 0 0 0;
  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:0 0;
  margin:0 0;
}
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpoEiOf-HpAaJGkxr1OM3FiDkJ3i9uDS0yBCRjEWrSAsQanuB7d7QvDAZtNkKMgj-_1xWwb2c8JQzAfnep9Oumb3rwMoKdC_I1P4c6l4LWjnoAp3OtuDreUNie3cIXPWXjbokLtsqJAQ/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpoEiOf-HpAaJGkxr1OM3FiDkJ3i9uDS0yBCRjEWrSAsQanuB7d7QvDAZtNkKMgj-_1xWwb2c8JQzAfnep9Oumb3rwMoKdC_I1P4c6l4LWjnoAp3OtuDreUNie3cIXPWXjbokLtsqJAQ/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpoEiOf-HpAaJGkxr1OM3FiDkJ3i9uDS0yBCRjEWrSAsQanuB7d7QvDAZtNkKMgj-_1xWwb2c8JQzAfnep9Oumb3rwMoKdC_I1P4c6l4LWjnoAp3OtuDreUNie3cIXPWXjbokLtsqJAQ/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpoEiOf-HpAaJGkxr1OM3FiDkJ3i9uDS0yBCRjEWrSAsQanuB7d7QvDAZtNkKMgj-_1xWwb2c8JQzAfnep9Oumb3rwMoKdC_I1P4c6l4LWjnoAp3OtuDreUNie3cIXPWXjbokLtsqJAQ/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpoEiOf-HpAaJGkxr1OM3FiDkJ3i9uDS0yBCRjEWrSAsQanuB7d7QvDAZtNkKMgj-_1xWwb2c8JQzAfnep9Oumb3rwMoKdC_I1P4c6l4LWjnoAp3OtuDreUNie3cIXPWXjbokLtsqJAQ/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://afowles.blogspot.com/";
limitspy=4;
intervalspy=4000;
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('<div id="mediablogger-widget"><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></div>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');</script>

Keterangan mengenai Recent Posts Scrolling Widget :

• Ubah numposts sesuai dengan keinginan Anda. 10 Adalah jumlah total recent posts terbaru yang dapat di scroll.
• Homepage dapat anda ganti dengan url blog Anda.
• Limitspy adalah jumlah recent post yang tampil di interface widget.
• Intervalspy = 4000; Scrolling kecepatan widget, jika Anda menurunkan kecepatan nilai widget akan meningkat.

Terakhir tinggal Anda Save dan lihat hasilnya.
Sekian Recent Posts Thumbnail With Scrolling Widget dari saya, semoga bisa membantu agan agan yg masih kesulitan.