Sunday, November 27, 2016
Hallo sobat blogger . Mas Achwan kali ini akan memberikan turtorial seputar cara membuat widget recent post bergerak , mas achwan tidak bisa memberikan demonya karena mas achwan sendiri tidak menggunakan recent post , jadi untuk memastikan anda bisa melihat sendiri hasilnya diblog anda .
Recent posts adalah sebuah widget yang biasa digunakan untuk menampilkan artikel atau postingan yang baru saja dipublikasikan sebelumnya , widget ini sangat berbeda jauh dengan popular posts walau fungsinya sama .
Sesuai dengan judul postingannya yaitu recent post bergerak , jadi recent posts pada turtorial ini berbeda dengan recent posts biasanya , karena dalam code recent posts kali ini menggunakan kode JQuery yang menyebabkan bergerak dan pastinya menjadi lebih menarik .
CARA MEMBUAT RECENT POSTS BERGERAK
1. Buka dasbor blogger lalu pilih menu Tata Letak lalu pilih "HTML/Javascript"
2. Masukan code dibawah ini .
<style type="text/css">
#rp_bsu_img{height:290px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_bsu_img ul{list-style-type:none;margin:0;padding:0}
#rp_bsu_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_bsu_img li{height:70px;padding:1px;list-style:none;}
#rp_bsu_img a{color:#55acee;}
#rp_bsu_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:13px;}
#rp_bsu_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_bsu_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #f5f5f5;width:75px;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/77161122610/bsurecentpost.js"></script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_bsu_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>
3. Klik simpan atau save .
Selesai deh anda tinggal mereviewnya dan melihat hasil dari recent post ini sudah tersedia atau belum di homepage blogger anda . Jika anda masih kebingungan silahkan tanyakan saja dikolom komentar .
Sekian artikel mas achwan kali ini semoga ada manfaatnya bagi anda yang membaca .