rss

About Me

My Photo
irnanto dwi saputra
View my complete profile

23 September 2011

Create a JQuery Slide show Recent Post

Salam blogger, before I would berterimakasi to visitors and lovers of bloggers in particular sekalin shabat - blogger friend, on the occasion tonight I'll share one for a simple trick, simple but fun hehe, how to install was very easy.

OK, the trick that I will give is how to create a "Recent Post JQuery Slide Show" with the name "Recent Post Slide Show"

this blog we will be more beautiful and interesting, hopefully our visitors were also felt at home.

OK, since I do not want to talk at length because it is still much to do, simply:

1. As usual Log into your Blogger account, select "Layout" then "Page Elements", 2. Click the "Add a Gadget" (whatever okay), then select "HTML / JavaScript", 3. Copy-paste the code below:
<script src="https://sites.google.com/site/efekefek/file-js/recentpostslide.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://weblearning27.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src=https://sites.google.com/site/efekefek/file-js/recentpostslide2.js' type='text/javascript'></script>
</div>

CAUTION

Replace the red code with your link address, OK.

After all the measures passed, the store and see the results!

Read also this....



0 komentar:


Post a Comment

 

Site Info

Google Pagerank Powered by  MyPagerank.Net My Ping in TotalPing.com TopOfBlogs My Zimbio Blog Directory