Cara Menciptakan Recent Post Slide Show

Cara menciptakan Recent Post Slide Show

Kali in saya akan share wacana bagaimana cara memasang slide show di blog. recent post sangat penting bagi blog kita sebab di mana pengunjung sanggup melihat artikel terbaru di blog kita!!!
Recent Post sanggup ditampilkan dengan banyak ragam, salah satunya dengan Recent Post Slide Show. Recent Post Slide Show ini memakai tampilan thumbnail atau gambar, sehingga pengunjung blog kita sanggup tertarik dengan artikel terbaru di blog kita.

Lihat teladan gambar Recent Post tampilan Slide Show dibawah ini:

Cara untuk menciptakan Recent Post Slide Show ini sangat mudah.
Tutorial untuk menciptakan Recent Post Slide Show sanggup anda lihat dibawah ini:

1. Login ke akun Blogger anda
2. Klik Rancangan lalu klik Elemen halaman
3. Klik Tambah Gadget
4. Pilih tamabah HTML/Javascript
5. Terakhir masukan isyarat dibawah ini dan simpan. Lihat hasilnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
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://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 = "http://harinfo-blog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Keterangan:

• Ganti goresan pena yang berwarna merah isi sesuai keinginan sobar karena itu merupakan lebar dan tinggi kolom.

• Ganti goresan pena yang berwarna biru dengan Url Blog anda.

• Untuk goresan pena yang berwarna hijau ialah jumlah artikel yang muncul dalam Slide Show.