"Membuat Recent Post Slide Show"

"Membuat Recent Post Slide Show"
Recent Post Merupakan Tampilan Akhir Postingan Kita yang manampilkan postingan-postingan kita yang terbaru, selain itu recent post mempermudah pengunjung melihat artikel lain yang berkaitan, Biasanya ditampilkan dalam bentuk text dan gambar yang diam membeku..dan kali ini kita buat Recent Post dengan efek Slide Show agar tampilannya lebih cantik dan atraktif.Seperti gambar dibawah :

Sebelumnya saya sudah membahas tentang cara membuat recent post dengan gambar di sini, nah..bagaimana agar bisa slide show?ikuti langkah berikut :

• Login ke akun Blogger sobat
• Klik Rancangan >> Elemen haLaman
• Klik Tambah Gadget
• Pilih HTML/Javascript
• Masukan kode berikut :

1. 
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
   </script>
   <style media="screen" type="text/css">
   <!--
   #spylist {
   overflow:hidden;
   margin-top:5px;
   padding:0px 0px;
   height:350px;
   }
   #spylist ul{
   width:220px;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:208px;
   padding: 5px 5px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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://biray-hacker.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>
   <div id="spylist">
   <script src="https://sites.google.com/site/aryasusastra/recentpostthumbslideshow.js" type="text/javascript">
   </script></div>
   
   
   

   
   
   

2. Simpan

Note :

• Url yang berwarna merah ganti dengan Url sobat
• Angka yang berwarna hitam jumlah post yang ingin di tampilkan

Read more: http://aryasusastra.blogspot.com/2011/12/membuat-recent-post-dengan-slide-show.html#ixzz2MFrB9Sqy