Cara Membuat Recent Post Dengan Tampilan Slide Show

Cara Membuat Recent Post Dengan Tampilan Slide Show - recent post adalah widget yang menampilkan artikel terbaru pada blog anda. dengan memasang recent post pengunjung dapat mengetahui daftar artikel terbaru pada blog anda sehingga artikel terbaru dapat dengan mudah dibaca oleh pengunjung, selain widget popular post widget recent post juga termasuk widget yang sering di pasang pada blog.

Sebenarnya untuk memasang widget ini tidaklah sulit karena default widget ini sudah ada pada blogger, anda tinggal menambahkan widget feed blog kemudian masukan masukan ULR blog anda.

Untuk kali ini saya akan memberikan tutorial membuat recent post dengan bantuan HTML/Javascript agar tampilan nya lebih menarik.

Cara Untuk Membuat Recent Post Dengan Tampilan Slide Show

1. Login kehalaman dasbor Blogger kamu.
2. Pilih layout/tata letak.
3. Pilih tambah gadget.
4. Pilih HTML/JavaScript
5. Silakan salin kode dibawah ini.


<div style="margin-bottom: 15px;"> <style type="text/css"> #rp_plus_img{height:287px;overflow:hidden;border:solid 0px #ecf88a;padding:1px 5px 14px 1px;background-color:none;} #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:# 9dff33;} #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;} #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/9011035172/ajaxslider.js"></script> <script type="text/javascript"> var speed = 400; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 10; var numchars = 60; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul> </div>

6. Klik simpan.

Ket: Untuk Warna background, tulisan ukuran bisa di edit sesuaikan dengan keinginan anda.

Jika Widgetnya tidak berfungsi, coba periksa kode jquery pada kode di atas.