Membuat Recent Posts dengan Thumbnail

Salah satu sarana untuk menampilkan Link atau posting-posting terbaru yang masih tergolong fresh adalah dengan adanya widget Recent Posts. Sangat berguna bagi para pengunjung untuk memudahkan pencarian artikel-artikel terbaru.

Recent Posts ini dapat dilenggkapi dengan sebuah gambar thumnail, yaitu sebuah cuplikan gambar dengan ukuran kecil untuk memberikan sedikit gambaran tentang artikel yang bersangkutan.

Berikut ini adalah cara untuk membuat Recent Posts dengan Thumbnail:

1.Log in ke Blogger
2.Kemudian pilih Design, Klik Page Element
3.Klik Add gadget, Klik HTML/Javascript
4.Letakan Kode Lengkap Recent Posts With Thumbnail kedalamnya kemudian Save.

Kode Lengkap Recent Posts With Thumbnail

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
<!--
#spylist {
     overflow:hidden;
     margin-top:5px;
     padding:0px 0px;
     height:350px;
     }
#spylist ul{
     width:220px;
     overflow:hidden;
     list-style-type: none;
     padding: 0px 0px;
     margin:0px 0px;
     }
#spylist li {
     width:208px;
     padding: 5px 5px;
     margin:0px 0px 5px 0px;
     list-style-type:none;
     float:none;
     height:70px;
     overflow: hidden;
     background:#fff url(https://archivesiugi.googlecode.com/files/RecentPost.jpg) repeat-x;
     border:1px solid #ddd;
     }
#spylist li a {
     text-decoration:none;
     color:#4B545B;
     font-size:11px;
     height:18px;
     overflow:hidden;
     margin:0px 0px;
     padding:0px 0px 2px 0px;
     }
#spylist li img {
     float:left;
     margin-right:5px;
     background:#EFEFEF;
     border:0;
     }
.spydate{
     overflow:hidden;
     font-size:10px;
     color:#0284C2;
     padding:2px 0px;
     margin:1px 0px 0px 0px;
     height:15px;
     font-family:Tahoma,Arial,verdana, sans-serif;
     }
.spycomment{
     overflow:hidden;
     font-family:Tahoma,Arial,verdana, sans-serif;
     font-size:10px;
     color:#262B2F;
     padding:0px 0px;
     margin:0px 0px;
     }
 -->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "https://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "https://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "https://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "https://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "https://caprt3a.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/archivesiugi/javascr/recentpost.js' type='text/javascript'></script>
</div>

Keterangan :
1.Ganti URL (https://caprt3a.blogspot.com/) dengan URL blog anda.
2.(Text warna Orange)Untuk mengatur lebar dan tinggi gambar (thumbnails).

Selesai, semoga bermanfaat!!!