Memasang Widget Recent Post Dengan Gambar (Thumbnail) Secara Horizontal

Pada beberapa artikel saya yang lalu, saya telah membahas tentang memasang widget recent post sederhana tanpa gambar dan dengan gambar. Nah, pada artikel kali ini, kita akan mulai sedikit memodifikasi widget recent post ini sehingga tampak cantik terlihat di blog.

Memasang recent post pada sidebar blog merupakan hal yang sudah umum kita lihat di blog. Memasangnya dengan gambar dan tidak hanya sekedar judul posting juga sudah biasa kita dapatkan. Akan tetapi, pernahkah anda mencoba cara yang satu ini? Memasang widget recent post dengan gambar (thumbnail) secara horizontal ? Tentunya belum kan? Jika anda penasaran untuk mencobanya di blog anda, dilahkan anda simak tentang bagaimana memasang widget recent post dengan gambar (thumbnail) secara horizontal. So, let's cekidot!

Memasang Widget Recent Post Dengan Gambar (Thumbnail) Secara Horizontal

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2 

Letakkan kode berikut ke dalam halaman HTML/JavaScript

<div id="bp_recent"></div><div class="bp_footer"><small><a id="bp_recent_link" target="_blank" href="http://thekampoengblogger.blogspot.com" style="padding: 1px 0px 0px 19px;text-decoration:none;"></a>Powered By <a href="http://thekampoengblogger.blogspot.com/" target="_blank" title="blogger widgets">Blogger Widgets</a></small></div>
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/recentposthorizontal.js"></script>
<script style="text/javascript">
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var showCommentCount = false;
var imgDim = 72;
var titleLength = 0;
var showThumbs = true;
var showNoImage = true;
var imgFloat = "left";
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src="http://URL-BLOG-ANDA/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails"></script>

Step 3

Save

Catatan!

• Bila anda ingin mengubah jumlah posting/artikel yang muncul, ganti angka 5 pada var numberOfPosts = 5
• Bila anda tidak ingin menampilkan tanggal posting/artikel, ganti kata "false" pada var showPostDate = false menjadi "true"
• Bila ingin menampilkan snippet (ringkasan) artikel, ganti  kata "false" pada var showSummary = false menjadi "true"
• Untuk menampilkan jumlah komentar, ganti kata "false" pada var showCommentCount = false menjadi "true"
•  Bila anda ingin mengubah ukuran gambar ganti angka pada var imgDim = 72 sesuai dengan ukuran gambar yang anda inginkan.
• Ganti http://URL-BLOG-ANDA/ dengan URL blog anda

 Step 4

Letakkan widget di bawah body.

Step 5

Save Arrangement

Selesai! Sekarang perhatikan bagian bawah halaman blog anda, sudah terpasang widget recent post yang anda buat tadi. Seperti ini tampakannya.

 
Semoga bermanfaat ya!
Wassalam.  

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 1:54 AM

Posted in: Energy Saving Mode , Sidebar , Widget