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

Jika Anda belum memasang widget artikel terbaru/recent post di blog Anda, maka kini yakni ketika yang tepat untuk menciptakannya. Tapi tunggu dulu, sebelumnya lebih baik kalau Anda mengetahui terlebih lampau, apa itu widget recent post, dan apa pula fungsinya.

Kaprikornus widget recent post yakni sebuah widget pemmenolong 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 yakni semoga lebih mempercantik blog Anda, dan semoga web/blog Anda terlihat lebih profesional lagi. Bahkan dengan memasang widget ini, berarti Anda sudah berupaya untuk meningkatkan page view blog Anda.

Perlu Anda ketahui, tidak tiruana 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 ketika mereka di halaman artikel Anda, di sinilah tugas widget artikel terbaru ini, untuk memperomosikan tulisan-tulisan terbaru Anda.

melaluiataubersamaini begitu, akan mengundang ketertarikan mereka untuk mengklik dan membaca artikel-artikel terbaru Anda tersebut. Widget ini baik sekali, sebab dapat 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. Kaprikornus inilah alasan mengapa widget ini dapat menambah page view atau jumlah tampilan halaman pada sebuah blog.

Untuk membuat widget recent post ini, ada beberapa cara yang dapat 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 yakni sesuai dengan judul di atas, yaitu recent post yang tanpa edit html, memakai thumbnail gambar serta memakai animasi gerak. Dulu pernah saya pasang di blog ini, tapi kini sudah saya lepas. Jika Anda ingin melihat demonya, silahkan kunjungi blog saya caracere.blogspot.com

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

1. Masuk pada sajian "tata letak" di blog Anda. Kemudian menambahkan gadget menyerupai 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. Sesudah itu akan muncul jendela html/java scrip menyerupai gambar diberikut.

 

5. Copy instruksi 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 instruksi warna yang Anda inginkan, sesuai blog Anda.

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

Bagaimana apakah berhasil? kalau iya, berarti Anda sudah sukses menciptakannya. Jangan lupa di share kalau kiranya bermanfaa bagi sesama. Nah, berarti cukup sekian goresan pena aku, semoga bermanfaa bagi Anda. Seperti biasa, kalau ada belum sempurnanya mohon dimenambahkan melalui komentar. Terima kasih TELAH BERKUNJUNG di blog ini :)

Share :