Membuat Recent Post Dengan Tampilan Slide Show

Membuat Recent Post Dengan Tampilan Slide Show

Halo Sobat evanzip...wah udah lama ne nga update postingan Tips And Trik Blogger...oke sobat,Tutorial kali ini evanzip akan membahas cara membuat Recent Post Dengan Tampilan Slide Show cara ini juga berguna untuk mempermudah  para pengunjung blog kita untuk mencari Artikel yang Mereka inginkan,karena dengan tampilan Slide show ini secara otomatis menampilkan postingan terbaru sampai postingan yang paling lama dengan gambar dan secara satu persatu menggeser tampilan sebelumnya alias slide show..sebetulnya banyak cara untuk membuat slide show pada postingan di blog tapi yang evanzip  posting kali ini cara  paling gampang untuk memasangnya di blog. oke sobat evanzip kalau sobat ingin memasang slide show ini di blog sobat silahkan ikuti langkah langkah di bawah ini gampang koq...:D

1. login blog sobat
2. rancangan -> elemen halaman -> tambah Gadget (HTML/JavaScript)
3. masukkan kode dibawah ini

<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:208px;
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://evanzip.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>

 
Untuk Tulisan yang berwarna merah Ganti dengan url sobat

Selamat Mencoba Semoga berhasil

    Kritik Dan Saran Anda Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Related Post