Cara Membuat Recent Post Dengan Efek Animasi Di Blog

Selamat datang kembali diblog Dapur Tutorial Blogspot dan Seo. Dalam kesempatan kali ini master chef hanya memberikan informasi soal Tutorial Blog ringan soal Widget Blogspot tentang bagaimana Cara Membuat Recent Post Dengan Efek Animasi Di Blog. berhubungan dengan masalah Recent Post, sebelumnya Master Chef juga sudah pernah publikasi soal Cara Membuat Recent 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 memberitau kepada pengunjung mengenai postingan terbaru dari blog sobat. Mungkin beberapa dari sekian banyak sobat blogger Dapur Tutorial Blogspot dan Seo 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

7. Selesai dan Lihat Hasilnya

Itu dia bahsan kali ini soal Widget Blogspot tetang Cara Membuat Recent Post Dengan Efek Animasi Di Blog. Semoga widget ini dapat membantu mempercantik tampilan halam blog sobat. sekian dan Terimakasih.

Tweet