Cara membuat RecentPost dengan gambar

Date → 14 Mei 2012

Tags → Blog Tips , Widget

RecentPost dan Plus Gambar

Setelah cukup lama  mengutak-atik beberapa gadget bloglist, akhirnya saya menemukan widget baru yang bisa menampilkan feed berikut gambarnya ( recentpost thumbnails ), yang dalam beberapa hal saya setuju, widget feed thumbnails ini jauh lebih mudah untuk saya  konfigurasi dari pada gadget bloglist.
eh tidak ding, karena meskipun mudah pada awalnya saya cukup repot juga xixixi, karena widget ini di tampilkan atau mengunakan table, yang saya sendiri kurang pamiliar dengan html table. tapi setelah mencoba mengutak-atiknya dan mencari reperensi tengtang table ini, akhirnya saya bisa juga memainkan sedikit jurus- jurus  css untuk properti table.
ilustrasi recentpost thumbnais.




Jika anda tertarik ingin memasangnya, silahkan lakukan prosedur berikut ini.
1.Buka tab Edit Elemen kemudian pilih atau tambahkan gadget Htm/Javascript.
2. Setelah itu masukan script di bawah ini.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
showRandomImg = true;
tablewidth = 300;
tableheight = 50;
cellspacing = 0;
borderColor = "none";
bgTD = " ";
imgwidth = 50;
imgheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";
numposts = 5;
home_page = "http://jaloee.blogspot.com/";
</script>
<script src="http://librarysupporter.googlepages.com/recentposts_thumb.js" type="text/javascript"></script>

3. Stop !!! jangan  di save dulu :) . karena kita harus mengetahui beberapa hal pada script di atas.
note 1

Script ini menjelaskan jika postingan kita tidak mempunyai sebuah gambar, maka gambar ( url gambar di atas ), akan mengantikanya. dan gambarnya akan di pilih secara acak ( true ).

note 2

Script ini menerankan lebar tabel, jarak antar cell, warna border, latar belakang cell. yang dapat anda konfigurasi dan di sesuaikan dengan lebar sidebar dan warna blog.

note 3

Script untuk tampilan lebar dan tinggi gambar. – kita bisa konfigurasi ulang.

note 4

Tampilan font, warna text link, text tebal.

note 5

Script tentang jumlah descriptsi recent post yang akan di tampilkan = 50; + .. , ukuran font, warna font, dan jumlah recentpost-nya = 5 ; ( bisa lebih bisa kurang )

note 6

Url blog yang akan di tampilkan recenspostnya , - home-page = http://bloganda.com/

note 7


Alamat kode javascript yang mengatur secara keseluruhan widget recentpost thumbail ini. dan salah satunya untuk kasus terntentu   kita bisa mengatur parameter feed / recent post yang akan di tampilkan. – ( tergantung kebutuhan ).
a. misalkan, saya hanya ingin menampilkan recent post dalam label atau categorie artikel “ Photoshop “ saja.
pertama buka kode javascrip dengan program notepad. kemudian cari dan ganti kode ini.
feeds/posts/default?max-results=
dengan paramter url feed ini.
feeds/posts/default/-/Photoshop?max-results=
Setelah saya menyimpanya dengan nama file recentphotoshop.js dan uploadnya.
( tentang mengatur parameter feed pernah saya tulis di recent post label. )
Selain itu ada lagi yang bisa ganti beberapa kode pada file javascript ini. seperti menganti tabelnya menjadi satu colom dua row. yang menghasilkan gambar feed-nya di atas, sedangkan posisi keterangan feednya di bawah.

ilustrasi gambar.


wokeh deh selamat berkreasi dengan widget recent post barunya.

source : mlxperience oleh : http://catalog-tutorial.blogspot.com/2009/02/recentpost-dan-plus-gambar.html dipubliskan kembali oleh : Ghost Blog - http://newbe-tutorial.blogspot.com/