Animated Recent Post

Beberapa waktu lalu saya membuat postingan artikel static recent post, kali ini saya akan membahas tentang cara membuat animated recent post atau postingan artikel terbaru yang dinamis. Sebagai contoh, bisa dilihat pada sidebar blog MozWidget atau pada contoh animated recent post di bawah ini.

Bagaimana cara membuat animated recent post ini ??? gampang, silakan disimak infonya...

• Login ke blog sobat.
• Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/Javascript".
• Copy - Paste kode di bawah ini kemudian letakan di konten gadget.
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2" type="text/javascript"></script>
  <style type="text/css" media="screen">
  #spylist {
  overflow:hidden;
  margin-top:5px;
  padding:0px 0px;
  height:350px;
  }
  #spylist ul{
  width:300px;
  overflow:hidden;
  list-style-type: none;
  padding: 0px 0px;
  margin:0px 0px;
  }
  #spylist li {
  width:250px;
  padding: 5px 5px;
  margin:0px 0px 5px 0px;
  list-style-type:none;
  float:none;
  height:70px;
  overflow: hidden;
  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgSWwU7bSEt-Qy8-ZjkwoW7rp97e6TWLM_XTq4UwY6Exrdj3Ud9FjzMhyvjBq1ySLiaEuBTQriPItbqp1ESNx3YZrw7yyjK1bwkw9OWtnchOrbhyphenhyphenXdRM4l5g17bHGLWL1Aw7qsVUmrdCW/s1600/bdlab-blogspot-com.jpg) repeat-x;
  border:1px solid #ddd;
  }
  #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] = "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 = 255;
  cellspacing = 6;
  borderColor = "#232c35";
  bgTD = "#000000";
  thumbwidth = 70;
  thumbheight = 70;
  fntsize = 12;
  acolor = "#666";
  aBold = true;
  icon = " ";
  text = "comments";
  showPostDate = true;
  summaryPost = 40;
  summaryFontsize = 10;
  summaryColor = "#666";
  icon2 = " ";
  numposts = 10;
  home_page = "http://monozcore.blogspot.com/";
  limitspy=4;
  intervalspy=4000;
  </script>
  <div id="spylist">
  <script src='http://monozcore-project.googlecode.com/files/recentpostthumbspylist.js' type='text/javascript'></script>
  </div>
  <div align="center">
  <span style="font-size:80%;"><a href="http://monozcore.blogspot.com/2011/11/static-recent-post-with-image.html" target="blank">Get This Widget</a></span>
  </div>
• Sesuaikan kode diatas yang berwarna merah agar sesuai dengan tampilan blog sobat.
  boxwidth  = 255; // Lebar kotak widget
  borderColor = "#232c35"; // Warna pembatas
  numposts = 10; // Jumlah postingan yang ditampilkan
  home_page = "http://monozcore.blogspot.com/"; // Alamat URL blog (NB: gunakan "/" pada akhir alamat seperti contoh diatas)
• Klik "Save" dan lihat hasilnya.

.:Semoga Bermanfaat:.