How to show preview of older posts at random in Blogger ?

By | April 22, 2012

Hi,
If you want to show the preview of your older posts at random in blogger page then use the following steps
1. Go to your blogger ‘Design’
2. Click ‘Add A Gadget’
3. Add ‘HTML/JavaScript’
4. Paste the following JavaScript code into it and save

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:218px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:204px;
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 = 555;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Your Opinions ?";

showPostDate = true;

summaryPost = 400;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 45;

home_page = "http://coderzheaven.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src="http://infution.byethost22.com/recentpostthumb.js" type="text/javascript"></script>
</div>

5. Done!

Note : Replace your blogger url in the “http://coderzheaven.com/” part! You can also change different parameters like number of random posts, font size, color etc.

Website Pin Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Premium Responsive

Leave a Reply

Your email address will not be published. Required fields are marked *