How To Add Sliding Recent Posts / You May Also Like Widget To Your Blog/Website

Hello Friends Back with a new post on adding a new stylish recent post widget to your blog.

The post you add recently will be shown in one by one in a sliding manner. It is really easy to add a stylish recent posts widget to your blog/website.



To Add Stylish Recent Posts / You May Also Like Widget To Your Blog/Website Just Follow Simple Steps one by one :

1 . Go to http://www.blogger.com/

2 . Log-In To Blogger.com using your gmail Id & Password

3 .  Now From Blogger Go To Layout




4 . After Selecting Layout Click On Add A Gadget On Where Ever You Need To Add Your Gadget (i.e) on left side (or) right side




5 . After Clicking On Add A Gadget You Will see a Pop-up Window in that select HTML/JavaScript



6 .Copy & Paste The Below Code In HTML/JavaScript Widget & Add Your Preferred Title Like Recent Posts or You May Also Like

<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:4px;
padding:0px 0px;
height:400px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:85px;
overflow: hidden;
background: #000
url(https://s-media-cache-ak0.pinimg.com/736x/cb/15/32/cb1532b03a0ffa6c8c26d0348a7eb60d.jpg)
repeat-x;
border: 1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}
#spylist img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; }
#spylist img {
-webkit-transition:
all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s
ease; padding: 4px; background: #eee; background:
-webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background:
-moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px
rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#spylist img:hover {
-moz-transform:
scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2)
rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2)
rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0
20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4),
inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px
rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
 }
.spydate{
overflow:hidden;
font-size:11px;
color:#007cb5;
padding: 3px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:2px 0px;
margin:0px 0px;
}
/* -------Animated Scrolling Recent Posts Widget By FunWithTricks.Com------ */
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[1] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[2] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[3] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[4] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
showRandomImg = true;
boxwidth = 300;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 72;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate =true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 10;
home_page = "http://www.trickbuff.com/";
limitspy=5;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>
<center><a href="http://www.trickbuff.com/2016/05/how-to-add-sliding-recent-posts-you-may.html" target="_blank">Try this widget!</a></center>




Changes To Be Made In The Code : 

  •  Press ctrl+f & search for trickbuff then replace trickbuff with your site name 




Changes To Be Made If Needed According to your Wish:

  •  You Can Change The numposts to your wish 


7 . That's It Your Done Check Your Site Widget Will Be Added.

8 . Thank You Enjoy...........!!!!!!!!!!!!!!




Manish Jain

Manish Jain is an indian blogger who loves to learn and find out interesting tweaks and tricks on pc and smartphones and share them with world .