Widget Artikel Terbaru dengan Gambar Thumbnails

Labels: • •
Sebelumnya Blogger Tune-Up pernah membuat artikel serupa "Tampilkan Artikel Terbaru Plus Gambar Thumbnail", tetapi sebenarnya fasilitas yang diberikan pada Blogger Hack sekarang sangat berbeda dengan sebelumnya. Widget yang akan dibuat masih tetap menggunakan JavaScript dan hasilnya hampir mirip dengan artikel "Pemenggalan Artikel Otomatis". Tetapi setelah dipraktekkan pasti akan ditemukan sesuatu yang berbeda.
Beberapa fasilitas baru, diantaranya:
  1. Widget yang dibuat berisi; ringkasan artikel, jumlah komentar, tanggal posting dan link "Selengkapnya".
  2. Gambar thumbnails; ketika kita menambahkan gambar didalam artikel maka dengan otomatis gambar tersebut akan disesuaikan hingga ukuran 75 x 75 pixel pada Widget Artikel Terbaru.
  3. Jumlah artikel yang ditampilkan tidak terbatas atau dapat disesuaikan dengan keinginan kita
  4. Proses modifikasi sangat mudah dan silahkan dicoba sendiri...

Langkah pembuatan widget artikel terbaru

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
Tambahkan Gadget baru
Langkah 4
Beri judul (misal: Artikel Terbaru) dan masukkan (copy paste) kode dibawah ini:
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Langkah 5
Simpan Gadget dan Preview blog...

Keterangan:
  1. var numposts = 5; : nilai 5 untuk menentukan jumlah artikel yang akan ditampilkan
  2. var showpostthumbnails = true; : nilai "true" untuk menampilkan gambar, nilai "false" untuk tidak menampilkan gambar
  3. var displaymore = true; : nilai "true" untuk menampilkan link "Readmore" dan nilai "false" untuk tidak menampilkan link
  4. var displayseparator = false; : nilai "false" untuk tidak menampilkan garis pemisah antar artikel, dan nilai "true" untuk menampilkan garis pemisah antar artikel
  5. var showcommentnum = true; : nilai "true" untuk menampilkan jumlah komentar, nilai "false" untuk tidak menampilkannya
  6. var showpostdate = true; : nilai "true" untuk menampilkan tanggal pembuatan artikel, nilai "false" untuk tidak menampilkannya
  7. var showpostsummary = true; : nilai "true" untuk menampilkan ringkasan artikel, nilai "false" untuk tidak menampilkannya (hanya judul artikel saja)
  8. var numchars = 100; : nilai 100 untuk menentukan jumlah karakter yang akan ditampilkan
Tampilkan Artikel Terbaru Sesuai Dengan Kategori (Label)
Untuk menampilkan artikel terbaru sesuai dengan kategori atau label kita hanya perlu menambahkan sedikit kode label agar widget artikel terbaru menampilkan artikel yang sesuai dengan kategori yang kita inginkan.
Perhatikan kode pada langkah 4 diatas dan cari kode dibawah ini:
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
jika sudah ditemukan, tambahkan kode dibawah ini dan ubah "Label" dengan kategori yang ingin ditampilkan:
/-/Label
sehingga kode menjadi seperti dibawah ini (kode warna biru adalah kode label):
<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Selamat mencoba, semoga berhasil. Tinggalkan pesan pada komentar dibawah... Happy blogging walaupun lapar... :)
Sumber : Blogger Plugins