Cara Membuat Recent Post + Thumbnail + Simpel Spy

Cara Membuat Recent Post berjalan dengan gambar

  inilah baru namanya dunia modifblog.. Hambar rasanya tanpa kreasi baru.. Sebenarnya, ini tutorial saya dapat dari blognya mas Abu Farhan. Emang, mas Abu Farhan ini banyak juga memiliki tutorial blogger yang keren2. Salah satunya adalah cara membuat widget recent post ini. MEMBUAT RECENT POST DENGAN THUMBNAIL DAN SIMPEL SPY. klo tidak salah ini karya abu farhan. Jelasin widget ini gimana ya. Bukannya ga bisa. Tapi rasanya nanti kurang tepat. Nah, untuk membuat pengertian dari widget ini, bisa langsung melihat demonya di sini pada bagian update terbaru. Setelah dilihat, gimana, dah tahukan? Seperti itulah widgetnya. Tertarik? Berani jamin, sobat modif pasti tertarik. Ayo, perhatikan caranya di bawah ini:

Tinggal copy pastekan aja kode di bawah ini di side bar blog sobat modif. Berikut kodenya:

<script src="http://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:95%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:90%;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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://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://instanttutorial.blogspot.com";
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 = "http://instanttutorial.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

SETTING:

1. Ganti 70 pada thumbwidth = 70; untuk lebar kotak
   thumbheight = 70; tinggi kotak
   Kedua di atas mengatur lebar dan tinggi thumbnail
2. Ganti 10 pada     numposts = 10;    10 tersebut mengatur jmlah postingan yang tampil  
3. Ganti  http://instanttutorial.blogspot.com/   dengan URL blog sobat modif Save dan siap dech. S e k a r a n g   makin cantik dech recent postnya
4. ganti link pada imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; untuk gambar default yang akan di tampilkan jika posting tidak memiliki gambar

           
NOTE:

Jika terjadi kesalahan yaitu mengenai gambar yang tidak muncul, maka penyebabnya adalah feed situs blog blogger sobat modif tidak diatur penuh ( full ). Untuk membuatnya penuh, langkah - langkahnya sebagai berikut:

1. Pergilah ke menu pengaturan ( sebelumnya ganti dulu bahasa blog blogger menjadi Indonesia, lihat pada halaman dasbor untuk menggantinya )
2. Klik feed situs
3. Pada Izinkan Feed Blog , pilih penuh
4. Save dan buka lagi blog, maka sekarang sudah tampak gambarnya..

Ref :

• http://modifblogmu.blogspot.com