Sliding Animated Recent Post Widget For Blogger - Add In Just 3 Step
Above is Recent Post widget animation
Well Guys I was searching for Sliding Animated Recent Comments But I Accidentally Found Recent Post Animated widget, So i decide to share with bloggiyan. If you need a professional look of your blog, you must place an animated Recent Posts widget in your sidebar. As a good designer you must have a stylish blog. So your visitors are easily attracted. Its is very easy to add this widget. You have to put a code in HTML/JavaScripts box.
Above is Demo Pic or if want to see Demo Click Here
Or If you want create your own animated preview as showing on top check out Following Post
Live Demo Of Animated recent post widget
How To Add Animated Recent Post Widget into Blogger
First Log into blogger account
Go to Dashboard >> Layout >> Add A Gadget >> HTML / JavaScript
1. Now Copy An Paste Below Code Into HTML / JavaScript Box.
- <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MOWwFhsqi1hwl3GKXlkHhn4TSLx4yJtAplo_hx7ICGZWDukl2TDnlG_-nBe0ggyrsKxAgeRi-145NB4EbKBll_aJWOBZBRPvwSPB15FwkzqqE6t26x9u1c1FsUqmArmtLeWKtEOirqxX/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4KZXsk4iUQEc6xJpuXkTRWojEKug5lZImYiSSPLTG1nR4GavN98vFvrN3j2ATXg1Zc3lPqJwlxYS6i9c7AQU33g-HBXRHroZsHOvISfRmPeevK38Yisn8COwj91fUxHq7jxua4u_ktM/s400/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4KZXsk4iUQEc6xJpuXkTRWojEKug5lZImYiSSPLTG1nR4GavN98vFvrN3j2ATXg1Zc3lPqJwlxYS6i9c7AQU33g-HBXRHroZsHOvISfRmPeevK38Yisn8COwj91fUxHq7jxua4u_ktM/s400/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4KZXsk4iUQEc6xJpuXkTRWojEKug5lZImYiSSPLTG1nR4GavN98vFvrN3j2ATXg1Zc3lPqJwlxYS6i9c7AQU33g-HBXRHroZsHOvISfRmPeevK38Yisn8COwj91fUxHq7jxua4u_ktM/s400/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4KZXsk4iUQEc6xJpuXkTRWojEKug5lZImYiSSPLTG1nR4GavN98vFvrN3j2ATXg1Zc3lPqJwlxYS6i9c7AQU33g-HBXRHroZsHOvISfRmPeevK38Yisn8COwj91fUxHq7jxua4u_ktM/s400/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4KZXsk4iUQEc6xJpuXkTRWojEKug5lZImYiSSPLTG1nR4GavN98vFvrN3j2ATXg1Zc3lPqJwlxYS6i9c7AQU33g-HBXRHroZsHOvISfRmPeevK38Yisn8COwj91fUxHq7jxua4u_ktM/s400/noimage.png"; 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.s2free.blogspot.com/"; limitspy=5 intervalspy=4000 </script> <div id="spylist"> <script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script> </div>
- In above code just change http://www.s2free.blogspot.com/ [the blue line] with your blog link or url.
Click Save Done!
Now Check Your blog & You Will Be happy after adding this attractive animated post widget
0 comments:
Post a Comment