Friday, June 26, 2009

Tampilkan Artikel Terbaru Plus Gambar Thumbnail

Mungkin kalau dalam bahasa cingcoangnya Recent Posts Plus Thumbnail maksudnya menampilkan artikel-artikel terbaru ditambah tampilan gambar kecil (thumbnail). Blogger Tune-Up masih terus menggodok fasilitas ini agar lebih fleksibel dan ringan, tapi tidak ada salahnya dibagikan dulu, mungkin ada diantara teman-teman blogger mencoba memodifikasi sesuai keinginan sendiri.
Sebenarnya fasilitas ini adalah penyempurnaan dari beberapa artikel yang pernah dibahas Blogger Tune-Up, coba silahkan periksa artikel "Menampilkan Daftar Posting Tanpa Batas", "Tampilkan Artikel Berdasarkan Kategori" dan "Pemenggalan Artikel Otomatis". Recent Posts Plus Thumbnail adalah gabungan dari ketiga artikel tersebut. Contoh penerapannya ada di blog Design Graphics. Penasaran ingin mencoba? Silahkan ikuti langkahnya...
Screenshot diambil dari Design Graphics
Langkah pemasangan Recent Posts Plus Thumbnail :
Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak"
Langkah 3
Tambahkan Gadget jenis HTML/JavaScript, dengan judul bebas (biasanya Artikel Terbaru)
Langkah 4
Masukan kode dibawah ini :
<script src="http://dedehendriono.googlepages.com/thumbrecpost.js" type="text/javascript"/></script>
<script>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
</script>
<scriptsrc="http://ALAMAT-BLOG.com/feeds/posts/default/-/KATEGORI?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
Langkah 5
Simpanlah perubahan/penambahan Gadget ini dan Preview (tapi baca dulu keterangan)

Keterangan :
  • Simpanlah thumbrecpost.js (klik kanan save as) di webhosting anda, soalnya Blogger Tune-Up tidak menjamin file tersebut tetap ada, kemudian ubah alamat URL-nya
  • Kode imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; adalah gambar pengganti seandainya artikel tidak mengandung gambar, ubah URL sesuai dengan alamat gambar kita
  • showRandomImg = true; ini untuk mengacak artikel yang akan ditampilkan, false tidak diacak
  • boxwidth = 300; ini untuk menentukan lebar gadget/widget
  • cellspacing = 1; ini untuk menentukan jarak antar artikel
  • borderColor = "#ffffff"; ini untuk menentukan warna border (garis pinggir) gadget
  • bgTD = "#000000"; ini untuk menentukan warna background (latar belakang) gadget
  • thumbwidth = 40; dan thumbheight = 40; ini untuk menentukan lebar dan tinggi gambar thumbnail
  • fntsize = 12; ini untuk menentukan ukuran huruf judul artikel
  • acolor = "#666"; ini untuk menentukan warna huruf judul
  • aBold = true; ini untuk mengatur ketebalan (bold) huruf judul artikel, jika false maka huruf tidak di tebalkan
  • icon = " "; ini untuk menempatkan link icon jika judul artikel ingin diberi bullets, lebih baik kosong (*)
  • text = "komentar"; ini bisa diubah menjadi apa saja misal; berkicau, berkoar atau apa sajalah
  • showPostDate = false; ini untuk menampilkan tanggal artikel dibuat, false tidak ditampilkan dan true ditampilkan
  • summaryPost = 40; ini untuk menentukan jumlah karakter dari judul artikel yang akan ditampilkan
  • summaryFontsize = 10; ini untuk menentukan ukuran huruf setelah judul artikel (*)
  • summaryColor = "#666"; ini untuk menentukan warna huruf setelah judul artikel (*)
  • icon2 = " "; ini untuk menempatkan link icon bullets setelah judul artikel, lebih baik kosong (*)
  • numposts = 5; ini untuk menentukan jumlah posting yang akan ditampilkan
  • ALAMAT-BLOG.com ubah alamat blog sesuai alamat blog anda
  • KATEGORI ini berfungsi jika kita ingin menampilkan artikel berdasarkan kategori, ubah KATEGORI sesuai dengan kategori yang ingin kita tampilkan, jika tidak ingin menampilkan artikel berdasarkan kategori hapus kode ini "/-/KATEGORI" sehingga menjadi ...default?orderby...
  • Perhatian!!! Ubahlah kode yang berwarna biru saja...
  • Yang diberi tanda (*) itu sebenarnya masih dalam tahap penyempurnaan, mungkin lain waktu fasilitas ini akan lebih baik...
Semoga berhasil, biasa berkomentar jika kesulitan atau add YM-ku supaya bisa berdiskusi lebih jauh... Happy blogging :)