Cara Membuat Widget Recent Post Keren

Posted by : AdiMPS Tuesday 26 March 2013

Widget recent post adalah widget yang diperlukan agar pengunjung dapat melihat artikel apa saja yang terbaru atau yang sering dibaca oleh pengunjung lainnya. Widget recent post ini hampir sama dengan widget popular post bawaan blogger. Lalu apa kerennya ?

Seperti kita ketahui bahwa widget popular post bawaan blogger hanya bisa kita rubah untuk ditampilkannya gambar, judul artikel dan summary posting. Untuk merubah besar - kecil nya gambar tidak ada option nya. Begitu juga untuk merubah berapa banyak huruf yang akan ditampilkan pada summary post juga tidak bisa.

Widget recent post yang saya sharing disini dapat mengatasi semua kekurangan tersebut.
Diantaranya:

Ukuran gambar / avatar bisa kita atur sesuai keinginan
Jumlah karakter huruf isi artikel bisa kita atur sesuai keinginan
Jumlah komentar yang masuk bisa kita tampilkan
Jumlah artikel yang ingin kita tampilkan bisa lebih dari 10 artikel

Cara menampilkan atau menghilangkan nya cukup dengan merubah parameter: true atau false pada script tersebut.
Untuk merubah yang lainnya, silahkan Anda explore sendiri. Jangan takut rusak.

Bagaimana cara membuat widget recent post keren tersebu, ikuti petunjuknya berikut ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:

<div style="overflow:auto; width:100%px; max-height:250px; padding:5px;">
<style>
img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 20;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://www.catatan-piper-comex.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>

4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan.
Anda bisa lihat hasilnya sebentar, apabila masih belum cocok bisa Anda modifikasi lagi sesuai keinginan Anda.

Problem ?

Subscribe to Posts | Subscribe to Comments

AdiMPS

Hidup 1X ja Santai Lah

Silahkan Pilih

Cara Membuat Widget Recent Post Keren

Leave a Reply

Arsip

Kategori Dipilih

Pengunjung GalaU