Cara membuat Widget Recent Post (Posting baru) di Blogspot

Widget Recent Post atau Postingan terbaru merupakan widget yang memang harus dimiliki oleh para blogger di blog-nya. Karena dengan widget ini kita sebagai blogger mendapat beberapa keuntungan yaitu : 

• Memberikan beberapa pilihan artikel terbaru (yang sedang naik daun) ketika pengunjung sedang membaca  artikel yang dicarinya.
• Dengan adanya widget ini kita dapat memberitahukan bahwa blog kita merupakan blog yang selalu update dan memiliki artikel atau berita-berita yang fresh.

Sekarang widget ini memang sudah disediakan oleh blogger melalui kerjasamanya dengan pihak lain. Dengan  konsep source atau data diambil dari feed. Namun widget recent post yang disediakan tidaklah cukup nyaman untuk di terapkan diblog, widget tersebut sulit sekali di customize dikarenakan widget tersebut merupakan sebuah jendela baru (dengan tag <iframe></iframe>).

Oleh karena itu saya akan memberikan cara yang mudah dengan hasil yang baik. Saya akan menjelaskan cara membuat widget recent post dengan tampilan scroll down secara otomatis, dan begini caranya :

Cara membuat Widget Recent Post

1. Hal pertama yang pasti anda harus lakukan adalah masuk ke akun blogger anda.
2. Pilih menu Layout.
3. Pada bagian section yang akan anda letakan widget ini anda klik Add a Gadget dengan jenis HTML/JavaScript.
4. Ketikan script dibawah ini :

   <div style="margin-bottom: 15px;">  
   <style type="text/css">  
   #rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;}  
   #rp_plus_img ul{list-style-type:none;margin:0;padding:0}  
   #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}  
   #rp_plus_img li{height:70px;padding:1px;list-style:none;}  
   #rp_plus_img a{color:#00A4DF}  
   #rp_plus_img a:hover{color:#444444;}  
   #rp_plus_img .news-title{display:block;}  
   #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;text-align:justify;}  
   #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}  
   </style>  
   <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>  
   <script type="text/javascript">  
   var speed = 400;  
   var pause = 5000;  
   $(document).ready(function(){  
   rpnewsticker();  
   interval = setInterval(rpnewsticker, pause);  
   });  
   </script>  
   <ul id="rp_plus_img">  
   <script style="text/javascript">  
   var numposts = 10;  
   var numchars = 30;  
   </script>  
   <script src="http://BLOGANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>  
   </ul>  
   </div>  
   

5. Perhatikan bagian paling bawah, ganti tulisan BLOGANDA dengan nama blog anda.
6. Untuk pengaturan postinganya terletak pada bagian :
   var speed = 400; pengaturan kecepatan scroll.
   var pause = 5000; pengaturan lama waktu berhenti scroll.
   var numposts = 10; pengaturan banyaknya postingan yang akan ditampilkan.
   var numchars = 30; pengaturan jumlah karakter dari postingan.
7. Dan untuk pengaturan warna huruf terletak pada bagian.
   #rp_plus_img a{color:#00A4DF} pengaturan warna link dari judul.
   #rp_plus_img a:hover{color:#444444;} pengaturan warna link dari judul ketika mouseOver.
8. Jika sudah sesuai keinginan, anda bisa SAVE dan anda preview.
9. Dan jika widget recent post tidak berjalan secara semestinya coba anda ketikan script dibwah ini :

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>  
   

Jika ada pertanyaan anda bisa langsung bertanya dengan berkomentar di bawah ini. Terima kasih dan semoga bermanfaat