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

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

Minggu, Agustus 25th 2013. | android
Jika Anda belum memasang widget artikel terbaru/recent post di blog Anda, maka kini yakni dikala yang sempurna untuk membuatnya. Tapi tunggu dulu, sebelumnya lebih baik kalau Anda mengetahui terlebih dahulu, apa itu widget recent post, dan apa pula fungsinya.

Makara widget recent post yakni 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 yakni biar lebih mempercantik blog Anda, dan biar 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 dikala mereka di halaman artikel Anda, di sinilah tugas 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, 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. Makara inilah alasan mengapa widget ini dapat menambah page view atau jumlah tampilan halaman pada sebuah blog.

Untuk menciptakan 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 aku 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 aku pasang di blog ini, tapi kini sudah aku lepas. Jika Anda ingin melihat demonya, silahkan kunjungi blog aku caracere.blogspot.com

Baiklah, inilah cara paling gampang menciptakan widget artikel terbaru di blog

1. Masuk pada sajian “tata letak” di blog Anda. Kemudian tambahkan 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. Setelah itu akan muncul jendela html/java scrip menyerupai gambar berikut.

 

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 harapan Anda.

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

tags: , ,