Cara Membuat Widget Artikel Terbaru/Recent Post Bergambar Di Blog, Dengan Animasi Gerak

Jika Anda belum memasang widget artikel terbaru/recent post di blog Anda, maka sekarang adalah saat yang tepat untuk membuatnya. Tapi tunggu dulu, sebelumnya lebih baik jika Anda mengetahui terlebih dahulu, apa itu widget recent post, dan apa pula fungsinya.

Jadi widget recent post adalah sebuah widget pembantu di dalam blog, yang berfungsi untuk menampilkan artikel-artikel terbaru milik Anda. Maka dari itu, recent post ini juga disebut widget artikel terbaru.

Keuntungan memasang widget ini adalah agar lebih mempercantik blog Anda, dan agar web/blog Anda terlihat lebih profesional lagi. Bahkan dengan memasang widget ini, berarti Anda telah berupaya untuk meningkatkan page view blog Anda.

Perlu Anda ketahui, tidak semua pengunjung masuk di blog Anda melalui home page/halaman utama. Banyak juga di antara mereka yang menemukan blog Anda, melalui artikel Anda di mesin pencari. Nah saat mereka di halaman artikel Anda, di sinilah peran widget artikel terbaru ini, untuk memperomosikan tulisan-tulisan terbaru Anda.

Dengan begitu, akan mengundang ketertarikan mereka untuk mengklik dan membaca artikel-artikel terbaru Anda tersebut. Widget ini baik sekali, karena bisa menyuguhkan artikel fresh kepada pengunjung, tanpa harus membuka home page Anda. Semakin banyak yang tertarik, tentunya semakin banyak halaman yang mereka buka di blog Anda. Jadi inilah alasan mengapa widget ini bisa menambah page view atau jumlah tampilan halaman pada sebuah blog.

Untuk membuat widget recent post ini, ada beberapa cara yang bisa Anda lalukan. Ada yang dengan edit html template, ada yang tanpa edit html segala. Bahkan model widget ini pun ada beberapa jenis. Ada yang dengan gambar, ada yang tanpa gambar, bahkan ada yang dengan gambar, plus animasi bergerak.

Nah, yang akan saya bahas di sini adalah sesuai dengan judul di atas, yaitu recent post yang tanpa edit html, menggunakan thumbnail gambar serta menggunakan animasi gerak. Dulu pernah saya pasang di blog ini, tapi sekarang sudah saya lepas. Jika Anda ingin melihat demonya, silahkan kunjungi blog saya caracere.blogspot.com

Baiklah, inilah cara paling mudah membuat widget artikel terbaru di blog

1. Masuk pada menu "tata letak" di blog Anda. Kemudian tambahkan gadget seperti gambar di bawah ini

2. Langkah selanjutnya cari widget html/java scrip, dan klik tanda plus (+), kemudian klik "OK" untuk menambahkan widget tersebut kedalam blog Anda.

 

3. Setelah itu akan muncul jendela html/java scrip seperti gambar berikut.

 

5. Copy kode di bawah ini, kemudian pastekan kedalam kotak "KONTEN" widget html tersebut. Untuk judulnya silahkan isi Artikel terbaru, atau recent post. Itu terserah Anda. Kemudian silahkan klik simpan.

<span style="font-weight:bold;"></span><div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;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://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 450;
var pause = 3600;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 6;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

CATATAN:

-Background-color "none" silahkan ganti none dengan kode warna yang Anda inginkan, sesuai blog Anda.

-Var numpost=6, itu adalah jumlah posting yang ditampilkan di widget recent post tersebut. Ganti angka 6 sesuai keinginan Anda.

Bagaimana apakah berhasil? jika iya, berarti Anda telah sukses membuatnya. Jangan lupa di share jika kiranya bermanfaat bagi sesama. Nah, berarti cukup sekian tulisan saya, semoga bermanfaat bagi Anda. Seperti biasa, jika ada kekurangan mohon ditambahkan melalui komentar. Terima kasih TELAH BERKUNJUNG di blog ini :)