Widget Recent Posts Dengan Efek Animasi Spy
Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.Widget Recent Post ini sama dengan widget Popular Post yang terdahulu, menggunakan script JQuery dan resource dari master blogger indonesia Abu Farhan.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.
Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.
1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;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="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;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="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>
4. Klik save dan lihat hasilnya.
semoga bisa bermanfaat..!!!
nice inpo sob :)
BalasHapusMakasih Gan sukses selalu buat Agan :)
Hapuskeren recent postnya...
BalasHapussukses selalu gan tutorialnya..
makasih Gan sukses kembali untuk anda,met mlm Gan...!
HapusAnimasinya bisa dibuat kesamping nggak wahyu?
BalasHapusbenar^ mantap tutorialnya gan
BalasHapusterima kasih sudah berbagi
Sip, terimakasih infonya, sobat... :)
BalasHapusmantap mass :)
BalasHapustampilannya, seperti yag sebelah kanan ini ya? keren Kang. salam
BalasHapusDengan recen pos efek animasi pasti tampil lebih beda ya gan.
BalasHapuswah mantep sob, saya pernah masang, heheh naik turun, mantep, hahaha
BalasHapusaq jg dlu sempat make sob.., thx ya. *smile
BalasHapuswah keren nih sob, tak bungkus dulu nih, trims sob dan happy blogging
BalasHapusinformasi yang bagus teman :)
BalasHapuskeren gan,,,ane coba dulu..
BalasHapuskayak yg di sidebar blog ini ya gan ?
BalasHapuswah, keren tuh gan
mntep nih buat mempercantik blog
BalasHapus.. pengen nyoba ach,, ..
BalasHapusok..tak coba gan... :D
BalasHapus