Wahhhhhh, setelah blog yang udah lama sepi ini akhirnya hari ini blog ku kedatangan pengunjung yang request cara buat "Recent Post with Thumbnails". Makasi buat pengunjung itu telah mengunjungi blog yang telah lama sepi dan sederhana ini.....
Secara ringkas Recent Post with Thumbnails ini dilengkapi dengan thumbnail image yang bisa kita udah sesuai keinginan, juga tersedia tanggal posting diterbitkan......

Berikut kode untuk menampilkan "Recent Post with Thumbnails" dan cara nya cupuk copy paste pada element blog kita:

<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:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:220px;
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:#000;
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:#FFFFF;
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:#000;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#000000";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#000";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#FFFFFF";

icon2 = " ";

numposts = 10;

home_page = "http://amiroktavia.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>


Pada kode yang bewarna hijau diganti sama alamat blog masing2......
Kode yang bewarna merah merupakan ukuran tinggi dan lebar kotak Recent Post, sesuai.... sebaiknya ukuran lebar ny disamakan biar stabil...



Selamat Mencoba.....

2 komentar:

Farid Abdurrahim mengatakan...

caranya edit HTML apa di Gadget ?

Farid Abdurrahim mengatakan...

plizzz langsung jawab, mohon ?

Posting Komentar

Copyright 2010 Tutorial, Tips & Trik..!!