Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 09, 2013

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.
widget recent post dengan gambar (thumbnail) secara horizontal

 
Semoga bermanfaat ya!
Wassalam.  

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 1:54 AM

5 comments :

Unknown said...

Makasih Kang Zainal atas JavaScript nya... saya ambil sebagian JavaScriptnya untuk di Blog saya. he he he he

Rysmah said...

ok, silahkan..

Unknown said...

gan , mau nanya gambar choppernya itu ikut ada gak?

Rysmah said...

gak gan

Didit Riadi said...

kok gak muncul ya sob, padahal udah ngikuti cara2 diatas

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.