Recent Post menjadi Slide

Hallo Sobat Blogger.. kali ini saya akan berbagi bagaimana membuat Recent Post kita menjadi tampilan slide yang bergantian dari atas kebawah terus menerus.. apa itu Recent Post ?.. Recent Post itu adalah tampilan dari posting-posting kita yang bisa kita tampilkan melalui Add Gadget/Tambah Gadget - HTML/JavaScript - masukan code script di bawah..

ScreenShot :

Copy Code nya :

<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:260px;
}
#spylist ul{
width:400px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
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://i857.photobucket.com/albums/ab139/wiwidhw/BannerBloggerBinjai180px.gif";

imgr[1] = "http://i857.photobucket.com/albums/ab139/wiwidhw/BannerBloggerBinjai180px.gif";

imgr[2] = "http://i857.photobucket.com/albums/ab139/wiwidhw/BannerBloggerBinjai180px.gif";

imgr[3] = "http://i857.photobucket.com/albums/ab139/wiwidhw/BannerBloggerBinjai180px.gif";

imgr[4] = "http://i857.photobucket.com/albums/ab139/wiwidhw/BannerBloggerBinjai180px.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 = 7;

home_page = "http://www.bloggerbinjai.tk/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Catatan :

#spylist ul{

width:400px; ( lebar kotak )

#spylist li {

width:300px; ( lebar teks )

numposts = 7; ( jumlah post yg di tampilkan )


home_page = "http://www.bloggerbinjai.tk/"; ( ganti dengan Alamat URL Web / Blog anda )


limitspy=4 ( jumlah kotak Slide yang ditampilkan )


Masukan Kode diatas dengan menambahkan Gadget/Add Gadget - HTML/JavaScript - Simpan




Selamat mencoba... Semoga bermanfaat dan Happy Blogging !! :)

I'm reading: Recent Post menjadi Slide

================================================

Terima kasih telah mengunjungi Blogger Binjai,
silahkan Tinggalkan Komentar dibawah ini dengan akun facebook Anda...