Cara Membuat Recent Post bergaya Slider ini sebetulnya sangatlah mudah he..he.. Sebetulnya apa sih fungsi dari recent post ini, Pertanyaannya adalah apakah Widget ini perlu untuk di pasang pada blog...? Menurut saya secara pribadi Widget ini perlu dipasang untuk sebuah blog, Alasannya adalah Untuk memperlihatkan entry baru atau memperlihatkan Artikel yang telah di posting. Nah sekarang lihatlah screen gambar di samping, bagus kaan dan masih di tambah dengan gaya slider per artikel ( artikel akan turun secara bergantian, Lihat aja punya saya he..he...)
Tertarik untuk memasangnya,,, he..he.. Mari kita coba pandu step by step bagaimana cara memasang widget tersebut secara mudah..
1. Masuk di Dasbor akun blog sobat
2. Klik Rancangan
3. Add Gadget html javascript
4. Lalu Copy kode berikut
<center><style type="text/css">
#rp_plus_img{height:200px;overflow:auto;border:4px inset #ffffff;-moz-border-radius-topleft:40px;-moz-border-radius-topright:40px;-moz-border-radius-bottomleft:40px;-moz-border-radius-bottomright:40px;padding:9px 20px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:2px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:2px;list-style:none;}
#rp_plus_img a{color:#ffffff;}
#rp_plus_img .news-title{display:block;font-size:16px;font-weight:bold !important;color:#0dc3ff;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:8px;font-weight:normal !important;color:#ffffff;text-align:justify;}
#rp_plus_img img{float:left;margin-right:5px;padding:4px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:solid 4px #0dc3ff;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 4000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 62;
var numchars = 102;
</script> <script src="http://blogsobat.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>
5. Ganti Url Blog yang saya beri warna merah dengan Url Blog sobat
6. Masukkan kode di html javascript
7. Beri Judul sesuai keinginan
8. Klik Simpan Lihat hasilnya..
Selamat Mencoba dan Salam Sukses !!!
Post a Comment