Jangan Bosen untuk Kunjungin Blog Sederhana Ini Yaahh !!! (-__-lll) (˘_˘”) Home | DickeyMaru™ | Caesar Shinobito | Join This Site

Saturday, August 27, 2011

Avatar

Cara Membuat Recent Post dengan Tampilan Slide Show



Tak jauh berbeda dengan cara membuat widget posting terbaru dengan gambar yaitu menampilkan posting terbaru dengan gambar tapi pada artikel Cara Membuat Recent Post dengan Tampilan Slide Show ini ada sedkit efeknya yaitu tampilannya akan menggeser satu persatu alias slide show.



Tampilan slide show ini akan menampilkan dari postingan terbaru sampai postingan yang paling lama ( klo kita mau melototin widgetnya terus sih..... hehehehehe )

ok deh langsung aja pada langkah-langkah Cara Membuat Recent Post dengan Tampilan Slide Show 
1. login blog
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://21gayaonfire.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>   

NB : ganti tulisan yang berwarna merah dengan alamat blog sobat
4. simpan....

Good Luck Friend ^_^

3 komentar:

  • kang mau minta izin copas dong widgetnya oke??

  • merahmarunluck.blogspot.com

    umpan balik ya??

  • post comment not spam !!!