Bismillah, Alhamdulillah

Skip to Content

Recent posts for blogger with thumbnails and Simple Spy

July 26th, 2009

Bismillah

Alhamdulillah, finally I made modification the widget from Bloggertricks.com and animation Simple Spy . Simple Spy style taken from Scarlet theme, results for wordpress can be found in this blog. View as below, For the demo on the blogger click :

Demo

image

For bloggers put into Sidebar Gadget(add gadget) select html, copy all html below to that gadget:

image


<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://www.raudhatulmuhibbin.org/";

limitspy=4
intervalspy=4000

</script>

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




Note :If your template already have a jquery do not put again, just copy after it

Html from above a few things could be replaced :

1. homepage address

home_page = “http://name-your-blog.blogspot.com/”;

2. Style


#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;
}



from above style/css, you can change :

width

width : 220px;

width:208px:

customize base on your template

and

background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

Customize the colors of backuground

3. image size

thumbwidth = 70;
thumbheight = 70;

Match your needs

4. How many post you will show

numposts = 10;

Base on what you need to show


Categories: Blogger Tricks, Featured, Widget

Tags: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

215 Responses to “Recent posts for blogger with thumbnails and Simple Spy”

  1. On top of this, unsaturated fats provide a slow release of energy, so
    unlike high sugar foods and refined carbohydrates, will keep you satiated for longer.
    Obesity is a health hazard, but there are ways to work with
    it, without compromising your health further.
    But let me explain the whole concept of this diet program.

  2. Kyaw swar says:

    http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js is down. show me as We’re sorry…

    … but your computer or network may be sending automated queries. To protect our users, we can’t process your request right now.
    See Google Help for more information.

  3. Balaputra says:

    I want to try it..
    ^^

  4. OPin says:

    Dear Friend. Unfortunately this item is no longer functioning as http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js address has been out of service. You can provide us the js file to upload to our servers? Thank you very much for all the work that you take.

  5. Rino says:

    mas widget Recent posts for blogger with thumbnails and Simple Spy kok error ya ?

  6. Ani says:

    Hi! I really like this slider and I’ve used it a year maybe on my blogspot blog. But 2 days ago it just disappear. Could you help me with any suggestions why is that?
    Thank you in advance and have a smiley day :)

  7. SmilePedia says:

    Wah bisa ditiru ini, ,
    Terimakasih infonya..

Leave a Reply


− four = four

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen