0

[How to] Add Sliding Recent Post Widget To Blogger.[Tutorial]

Hello Blogger friends,sorry for posting after a long.But i have came with a very Nice widget To show your recent posts in a beautiful way.Today i m gonna share with you How To Add Sliding Recent Post widget To Blogger.It looks good,elegant,clean.So ready to add this widget,So the Tutorial for How To Add Sliding Recent Post widget To Blogger goes here..

Follow Some Simple Steps to implement..

Login to Your Blogger Dashboard.
Click on Design Tab->Page Elements->Add a gadget.
then select HTML/Java Script
Now copy the following code below and paste it there…

<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://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/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.step2problogging.blogspot.com/“;
limitspy=4
intervalspy=4000
</script>
<div id=”spylist”>
    <script src=’http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js’ type=’text/javascript’></script>
</div>
 <span style=”font-size:75%;”><a href=”http://step2problogging.blogspot.com/2011/07/how-to-add-sliding-recent-post-widget.html” target=”_blank”>Get This Widget</a></span>

Edit The link in green colour with your link
Thats all save it…..enjoy…Share your comments…

Abhishek Balani

A Full Stack Developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner.

I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment.

Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.