Cara Membuat Recent Post Dengan Efek Animasi Di Blog

Halo sobat,,kali ini saya akan berbagi ilmu tentang tentang bagaimana Cara Membuat Recent Post Dengan Efek Animasi Di Blog. berhubungan dengan masalah Recent Post, sebelumnya saya juga sudah pernah publikasi soal Cara Membuat Related Post Dengan Thumbnail Keren. bedanya dengan Recent Post yang akan kita terapkan kali ini yaitu Recent Post memiliki efek animasi seperti terlihat pada gambar berikut :

Fungsi Widget Recent Post itu sendiri sesuai dengan namanya yaitu berfungsi untuk menampilkan dan memberitahu kepada pengunjung mengenai postingan terbaru dari blog sobat. Mungkin beberapa dari sekian banyak sobat blogger  tertarik untuk menerapkan Widget Blogspot yang satu ini.

Langsung saja kita bahas resep-resepnya sebagai berikut :

1. Patikan sobat sudah login ke akun blogger masih masing
2. Jika sudah login silahkan Pilih Menu "Tata Letak "

3. Tambah Gadget 

4. Tambahkan Widget HTML/JavaScript.

5. Sekarang Copas kode dibawah ini dan letakan kedalam kolom Widget HTML/JavaScript


<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></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 style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://dapur-tutorial.blogspot.com/2013/02/cara-membuat-recent-post-dengan-efek-animasi-di-blog.html" target="_blank">Get a Widget</a></small>

Kode Warna Merah diatas adalah kode warna. silahkan sobat sesuaikan dengan tampilan blog sobat.
6. Jika sudah klik Simpan/Save

7. Selesai dan Lihat Hasilnya

Nah,,Itu dia sedikit ilmu dari saya kali ini soal Widget Blogspot tentang Cara Membuat Recent Post Dengan Efek Animasi Di Blog. Semoga widget ini dapat membantu mempercantik tampilan halam blog sobat. sekian dan Terimakasih.