[Hot News]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.

Get The Live Demo Of The Widget

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

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

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3SYIh9q09WUL3xs-IMbDrNAtetf6LGaJb16ty9WY3OO-mgYibZfdGvm2pcwh2OL2Nq3Lg5uPnkiQye1tHyNGN8M1ipvPeUJnZuGTDNjHAQvA-I7_mLheQ3V5P9Kow22cqiGtiBO0FOw/s88-no/thumb.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3SYIh9q09WUL3xs-IMbDrNAtetf6LGaJb16ty9WY3OO-mgYibZfdGvm2pcwh2OL2Nq3Lg5uPnkiQye1tHyNGN8M1ipvPeUJnZuGTDNjHAQvA-I7_mLheQ3V5P9Kow22cqiGtiBO0FOw/s88-no/thumb.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3SYIh9q09WUL3xs-IMbDrNAtetf6LGaJb16ty9WY3OO-mgYibZfdGvm2pcwh2OL2Nq3Lg5uPnkiQye1tHyNGN8M1ipvPeUJnZuGTDNjHAQvA-I7_mLheQ3V5P9Kow22cqiGtiBO0FOw/s88-no/thumb.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3SYIh9q09WUL3xs-IMbDrNAtetf6LGaJb16ty9WY3OO-mgYibZfdGvm2pcwh2OL2Nq3Lg5uPnkiQye1tHyNGN8M1ipvPeUJnZuGTDNjHAQvA-I7_mLheQ3V5P9Kow22cqiGtiBO0FOw/s88-no/thumb.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3SYIh9q09WUL3xs-IMbDrNAtetf6LGaJb16ty9WY3OO-mgYibZfdGvm2pcwh2OL2Nq3Lg5uPnkiQye1tHyNGN8M1ipvPeUJnZuGTDNjHAQvA-I7_mLheQ3V5P9Kow22cqiGtiBO0FOw/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://buddysmartphone.blogspot.com/";

limitspy=5;

intervalspy=3000

</script>

</div>

<center><a href="http://buddysmartphone.blogspot.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...........!!!!!!!!!!!!!!