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

membuat artikel terbaru

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 :)

20 komentar

terima kasih mas tutornya...ijin nyoba dlu ya...salam kenal dri saya n ditunggu kunjungan baliknya disini :
http://www.cahkudus.com/

@EL-SYADA iya sama-sama :) makasih udah mampir

trima kasih ? postingan ini sangat membantu ?

@Bayu erlangga firdaus : sama-sama gan :D

trima kasih ? postingan ini sangat membantu ?

http://cbs-bogor.net/

@WIKA MAHARDIKA : iya sama-sama gan..

thanks mas brow ane ijin sedot dulu soalnya ane mau atur lang widget- widget ane biar lebih ringan
tolong bantuannya ya newbie ni soalnya biar blog lebih seo harus gimanain template ane coba cek ke http://sebisaanda.blogspot.com

@blog Anda: Silahkan gan.. :)

makasih bnayak buat tutornya,, ijin coba yaa...


http://toko-greenworld.com/

Mantap gan.. ini yang ane cari.. keep posting.. :D

@ sun kitz: Iya gan.. terima kasih dah berkunjung ya :)

Terimakasih tipsnya. Saya telah mencoba beberapa dari hasil browsing, namun bemasalah terus, ada yang tidak tampil, ada yang tampil namun cuma 1 judul saja, padahal sudah disesuaikan untuk jumlah postingan, akhirnya saya ketemu dgn blog ini dan alhamdulillah berhasil. Kunjungi kami di contohskppns.blogspot.com

gan kok di gambar di artikel baru ada tulisan blog orang ? js nya yg diedit mana? biar atas nama blog sendiri..mohon bantuannya..

jsnya gak perlu diedit gan, cuma yang saya sarankan saja yang bisa agan edit.. kalau memang masih muncul artikelnya orang, mungkin mereka udah rubah jsnya.. :) sori gan, saya sudah gak pakai widget tersebut soalnya..

Gak work di blog saya, gak muncul daftar artiklenya.

mungkin templatenya kali gan yang gak mendukung..

Keren gan sekarang widget artikel terbaru sudah terpasang di blog sayaa..

Berhasil gan... keren jadinya.. :D

Gunakan kotak komentar untuk bertanya, menambahkan, memberi saran serta berdiskusi. Namun demikian, saya meminta kepada Anda agar jangan sampai menyinggung sesuatu yang berbau SARA. (Suku, Agama, Ras dan Antar Golongan) UPDATE: peraturan berkomentar telah saya perbarui menjadi lebih banyak. Silahkan baca di link ini http://goo.gl/HWGGd8
EmoticonEmoticon