CARA MEMBUAT RECENT POST BERJALAN

Banyak sekali Style atau gaya yang bisa digunakan untuk membuat sebuah Recent Post pada blog. Mulai dari gaya mudah dan klasik, hingga gaya eksklusif yang lengkap dengan gambar. Namun, dari banyak style Recent Post yang paling diminati adalah Recent Post Berjalan seperti yang saya gunakan saat ini.

Sebenarnya, Blogger / Blogspot sendiri sudah menyediakan fasilitas Recent Post bawaan yang dapat ditambahkan pada blog dengan mudah, praktis, dan otomatis. Hanya saja, recent post bawaan blogger itu kurang menarik, dan hanya berupa link - link biasa saja tanpa style yang menarik.

Hal itu membuat saya berinisiatif untuk membuat jenis recent post baru. Walaupun, mungkin jenis Recent Post seperti ini sudah banyak digunakan oleh blogger lain, sebelum posting ini ditulis. Karena, saya lihat - lihat ternyata banyak sekali Recent Post seperti ini yang sudah digunakan.

Untuk sobat yang berminat menggunakan Recent Post ini, silahkan ikuti langkah - langkah berikut untuk mulai mencoba dan membuatnya :

• Pertama - tama, seperti biasa log in terlebih dahulu ke akun blog sobat,
• Selanjutnya, Buka Tata letak, dan Klik Tambah Gadget,
• Tambahkan Elemen Fungsi Pihak ketiga HTML/Javascript,
• Lalu Copy Paste script di bawah;

<script src="http://hostfileprofessional.16mb.com/files/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:335px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://hostfileprofessional.16mb.com/images/rcpost.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] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[1] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[2] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[3] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[4] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
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 = 20;
home_page = "http://fileprofessional.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://hostfileprofessional.16mb.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Keterangan :

1. height:350px adalah ukuran panjang recent post. Silahkan sesuaikan dengan lokasi tata letak widget dan ukuran sidebar blog, sesuai kebutuhan.
2. width:335px, adalah ukran lebar recent post. Bisa juga kita sesuaikan dengan sidebar blog kita sesuai kebutuhan.
3. numposts = 20; adalah jumlah posting yang akan ditampilkan pada recent post. Silahkan atur sesuai kebutuhan.
4. home_page = "http://fileprofessional.blogspot.com/"; adalah url dari blog yang akan dibuatkan recent postnya. Silahkan ganti dengan url blog sobat.
5. Sebenarnya, masih banyak pengeditan seperti warna, ukuran, dan gambar yang dapat dilakukan. Hanya saja, mungkin jika dijelaskan akan terlalu panjang lebar. Dan saya rasa cara ini sudah cukup untuk para pemula (seperti saya juga).

• Dan langkah terakhir silahkan save dan coba lihat hasilnya.