Widget Animasi Postingan Artikel Terkini

Widget blog animasi postingan artikel terbaru atau terkini merupakan salah satu widget yang dapat memberikan informasi tentang postingan artikel blog yang baru di terbitkan di blog sobat secara dinamis. Widget blog ini cukup menarik dan tidak banyak memakan tempat di blog sobat. Sebelumnya saya sudah membuat widget postingan artikel terbaru versi statis, widget blog kali ini saya akan membahas tentang cara membuat widget blog animasi postingan artikel terbaru atau postingan artikel terkini yang dinamis. Sebagai contoh seperti yang terlihat di bawah ini.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa kode tersebut agar sesuai dengan tema blog sobat.
  
  

  
  <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/AVvXsEiKoy5XQGHRaZB9bkNLPfySMsO8N2GmpLDAvCBX8rD7cz7zmk_xWo1vjbDpnuNjr70t_J5JlRs8xBpuyX5XDVFNierqq_3fh7kuqz5Eesp01HXbSPKgCSQnCRMxeB8j6_ZYGzb5qSRVTs00/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://monosbit.blogspot.com/";
  limitspy=4;
  intervalspy=4000;
  </script>
  <div id="spylist">
  <script src='http://sites.google.com/site/monosbit/monosbit_recentpostthumbspylist.js' type='text/javascript'></script>
  </div>
  <div align="center">
  <span style="font-size:80%;"><a href="http://monosbit.blogspot.com/2016/03/widget-animasi-postingan-artikel-terkini.html" target="blank">Get This Widget</a></span>
  </div>
  

  
  KETERANGAN :
  • 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://monosbit.blogspot.com/"; // Alamat URL blog (NB: gunakan "/" pada akhir alamat seperti contoh diatas)


• Klik "Save" dan lihat hasilnya...

Oke sobat monosbit jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.