Membuat widget recent post dengan readmore

      Recent post atau bisa juga disebut dengan news post (dalam b.Inggris), seringkali digunakan oleh para blogger. Sebenarnya, widget ini sudah disediakan oleh blogspot, tetapi untuk anda yang bosan bisa memodifikasinya. Pada umumnya, widget ini hanya menggunakan Judul, cupikan artikel, dan image. Tapi, bagaimana kalau menggunakan tombol readmore animasi? Bagaimana bentuknya? bentuknya akan seperti ini :                                  

                                                                LIVE DEMO  

1. Login blog.
2. Tata letak.
3. Add gadget.
4. HTML/Java script.
5. Copas kode dibawah ini :

<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjQnA-VHE5ODaGmrq8R2SmWvw0ftrhKp4wWj0bm_DjCb5Mo_NvBYmCAOqp7QOCGsBMJzSvCRMsoeZcBVDmsnreMY72d83wrWzEM9HBp1zaihBrmbggVoS0t6H1jY2apDSgqlm5hK5yK4/s1600/img1.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5lmG-caR9zbtBb7co9wGsKz_EHDuwl_9MIV8jnLo3QZELDbfVEW4jDjug11kjgsqVj1iBy03pK9s7ggnT1rTUkTyaKsUJ9jh4NjaC_hItA2dPBqu5VVk5BjD2Q-7pKx5Q64nq6gsvt8U/s1600/img2.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi65QLbzBqrWSSYCISo3AqaUJ8CP9IionnSurRSWlSX8KO_NPZ-j4G_w0B3uGIdAiDgEEjZXPCDXZTeYIJj6jfHEciG_Q8DumIj37m_Ogd_9t20JKAEk7txLFgVgo6_MvhRJJojz7Fyn8M/s1600/img3.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NjoWn60lOkj4p1QI3JUj_sznG-f1wwNXEiVjJxk3BLOLMoUbyTTyaYZHJJ8b5uEk6m9EWfINgK4odZOFDLe1QmabGDEird-1Q5ojs5xZTXuM-QtNuFyR8FnsWxDpeKhhMOdvLNeYVYg/s1600/img4.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEao7NXz2bJiJ2V_JmgToHBUepiXWkvO3rQRjY3qdv8JiGUHGL439-1H3I_w-dYyccs0qvXjDw10Wy2kFnGtfyw6e3t8u67ndqPo2vyoBA1DP6TNeG53bvszdax8wr1pM9L0D57kRnciA/s1600/img5.jpg";

showRandomImg = true;

tablewidth = 250;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#ffffff";

imgwidth = 40;

imgheight = 40;

fntsize = 12;

acolor = "#000";

aBold = true;

icon = " ";

text = "";

fsize= "11";

showPostDate = true;

summaryPost = 60;

summaryFontsize = 11;

summaryColor = "#666";

icon2 = " ";

numposts = 3;

home_page =

"http://infoiki.blogspot.com/";

</script>

<script type="text/javascript" src="http://infoikiblog.googlecode.com/files/Recent%20post.js"></script><a href="http://infoiki.blogspot.com/2012/07/new-post-dengan-readmore.html">Get this</a></a></a></div></div>

Note :
1. Kode blok merah. Border : Garis tepi, bgTD : backround.
2. Tinggi-lebar image. Imgwidth dan imgheight.
3. fsize : besar huruf.
4. ShowPostDate : Menampilkan tanggal, hari, waktu. Untuk tidak menampilkannya, ubah true menjadi false.
5. Summary fontsize : besar-kecil huruf. SummaryColor : warna font.
6. Numpost : jumblah post yang ditampilkan.
7. Kode berwarna merah tebal : Ganti dengan alamat blog anda.

6. Save template dan lihat hasilnya.