Scrolling recent posts gadget is a best widget to show off recent posts from your blog with a jQuery scroll effect,which grabs attention of of visitors very quickly.Previously I shared a scrolling/ticker recent posts widget but some of you faced some problems while installing it,that's why here I am sharing a new scrolling recent posts widget,which works a with a jQuery spy effect,this is the best feature of this widget.Each snippets of this widget contains title of post,thumbnail of post,date when that post was published and number of comments on that post.Also all of the above options are fully customizable,so that you can easily customize this widget as you wish.Above are the some features of this widget now lets see how to add it into your blogger blog.



Live Widget Demo ▼



How To Add Scrolling Recent Posts Widget To Blogger?


Step 1 -:

This widget works with jQuery spy effect so that we have to add jQuery library to our blog first (Note - Ignore this step if you have already added jQuery library to your blog.)

  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed button
  4. Find below code in your template

</head>

add below code just above it,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>


Now you have implemented jQuery library into your blog.Now lets see how to add scrolling recent posts widget to blogger.

Step 2 -:

  1. Go to Blogger Dashboard > Layout
  2. Click on Add a Gadget
  3. Select HTML/JavaScript

Paste below code inside it,

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget 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);
}

#helperblogger-widget 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: 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;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.helperblogger.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://helperblogger.ucoz.com/code/recent-posts-spy.js' type='text/javascript'></script>
</div>


Now replace http://www.helperblogger.com/ with your blog URL.

Widget Customizations

As I mentioned above this widget is fully customizable,you can also customizing it at your own just by reading the properties of the values such as numposts means number of posts.In above code I am highlighting some values which you can simply edit them.Also I highly recommend you that,done all the changes in our HTML Editor.With using the html editor you can simply customize this widget as you wish with watching preview of your chnages.
Below I am describing some important values,

  • numposts = 10; Total number of posts which you wants to scroll by this widget
  • limitspy=4; Number of the posts to appear on the widget
  • intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.
Finally save your all changes and visit you blog to see the working widget.

Please let us know your thoughts on this widget.Peace and Blessings Buddies :)

Post a Comment

  1. that's is awesome....
    http://premium-area.blogspot.com

    ReplyDelete
  2. dude, my widget dont scroll it just show then fades and never repeat please help me, thanks before

    ReplyDelete
    Replies
    1. This can be cause because presence of two jQuery libraries in your blog.

      If yes - then delete one of them

      If no - then replace present jQuery code with one which I have preovided above.

      Delete
    2. How can i find the jQuery libraries in my blog? please help

      Delete
  3. Replies
    1. You are right bro, it not new for us but its new for others that's why I have shared it :)

      Delete
  4. Hello brother. Thanks for the info. Everything works except that my widget does not scroll and it is too wide overall. How do I adjust the width? I have tweaked the code a little bit but I think there may be portions on the right that are cut off... please help...I have a jQuery library for Awesome Automatic Slider on my blog: xdisciple.blogspot.com, perhaps that is causing a conflict? http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/

    ReplyDelete
  5. Hey I have checked out your blog and noticed that the widget is scrolling,I think you have fixed it :) Now if you want to adjust the width the add below code inside #helperblogger-widget {


    width: 300px;

    save it and you are done :)

    ReplyDelete
    Replies
    1. Thanks Rahul. I played with the variables, now I want to move the widget inside my multitab bar but it stopped working properly. I added the noconflict before the head closing tag but did not work.

      Delete
    2. Actually this is the problem: when the new post slides in at the top, it is crunched crushed too flat. I made the widget itself 1000px but that is not the cause...

      Delete
    3. I tried combinations of disabling one or two of the jQuery libraries I have but ended up with the temporary solution of enabling all. The recent posts doesn't scroll but it's okay for now unless you can suggest something.
      Thanks, brother!

      Delete
  6. Thanks for sharing! Using it now and it is working beautifully!

    ReplyDelete
  7. I Have Done It As You Say But It Stopped Scrolling After Some Time & Never Scrolls Again....So, What's The Problem...?
    My Blog--- http://cheatspedia.blogspot.com/

    ReplyDelete
    Replies
    1. Your blog have 4 jQuery libraries,delete 3 of them and keep only 1,then try it :)

      Delete
    2. Not Working Please Tell Me The Write Way To Get Rid Of The Problem.!!!!!!!

      Delete
    3. Ok then only use the jQuery which I have posted above,delete all of them.If it doesn't work then add below code just before of </head> tag in your template,

      <script type="text/javascript">
      $.noConflict();
      </script>

      Delete
    4. check out .. you must have added someother widgets with Jquery .. i removed one.. and it again started working..

      Delete
  8. My widget does not scroll.Please help me i don't know how to find jquery in my template designer.

    ReplyDelete
  9. http://wayanattukaran.blogspot.in/
    sir
    not scrolling in my blog

    ReplyDelete
  10. plz give me scrll html code

    my blog http://techforbes.blogspot.com/

    ReplyDelete
  11. brother please help me. when i am add this in my blog i face a problem. my blog slide show images stopped working just appear black screen.. but this this widget work. if remove the below code my slide show working. brother solve my problem. i want both.


    (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>)

    (http://hebronaudios.blogspot.in/)

    ReplyDelete
  12. But there will be many jquery for slider, dropdown naviagtion bar. if we remove all of them.. they aint gonna work anymore..isn't it?

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Not scrolling out Brother.what Should i do??? help please..

    ReplyDelete
  15. thanks,,it working on mine..

    ReplyDelete
  16. thanks for the code sir
    i enjoyed this code very much and also i followed facebook plugin post to my www.jobsyear.com
    www.abcjobs.in
    www.meesevaap.in
    www.manadiresult.org

    ReplyDelete
  17. Thank you for this awesome code, i use this in my web http://www.taufanart.com

    ReplyDelete
  18. how to change background to black?? thanks

    ReplyDelete
  19. Can you set it up to use only posts with specific tags?

    ReplyDelete
  20. wow this amazing widget...
    bookmark right now...i will do it later..thanks for sharing....
    Keep posting...if have a time visit my blog :d
    www.filmmediafire.com

    ReplyDelete
  21. wow this is awesome, c i applied it to my blog
    http://slbabes.blogspot.com/

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. guyz try new blog http://alltrickszone.co.cc

    ReplyDelete
  24. hey i have slider in my main page of the blog when i am simple put recent posts html code its not work . i want to work both recent widgets and slider can you guide me this is my blog http://bit.ly/RfQEhU

    ReplyDelete
  25. ey i have slider in my main page of the blog when i am simple put recent posts html code its not work . i want to work both recent widgets and slider can you guide me this is my blog www.moderncpt.org

    ReplyDelete
  26. Thanks very nice
    http://health-is-care.blogspot.com/

    ReplyDelete
  27. Awesome info Thanks for sharing this...

    ReplyDelete
  28. How can I resize it without getting the thumbnails blurred?

    ReplyDelete
  29. Oh men you are the great. It is nice working. Many many thanks.

    ReplyDelete
  30. Hi Rahul! Plz check my blog, the widget is not scrolling??????
    http://arsalan4khan.blogspot.com/

    ReplyDelete
  31. wow, super. I got what i want .Congrats and thanks

    ReplyDelete
  32. Hi Rahul! Plz check my blog, the widget is not scrolling??????
    http://anwariqbal.blogspot.com/
    plz i also have same template like u bu still not working.............

    ReplyDelete
  33. hi

    please i want to delete the comment counter on this widget can you show me how ? because i tried many time but i failed

    thanks

    ReplyDelete
    Replies
    1. thanks sir, it is working perfectly, check it out in my blog @ clixseo.info

      Delete
    2. i think it is easy. just find this part on the widget and change font-size from 10 to 0 and it disappear

      -------------------------------------------------------------------------
      .spycomment {
      overflow: hidden;
      font-family: Tahoma,Arial,verdana, sans-serif;
      font-size: 0px;
      color: #262B2F;
      padding: 0px 0px;
      margin: 0px 0px;
      -------------------------------------------------------------------------

      Delete
  34. wonderful post, thanks alot for this.
    working great in make money online

    ReplyDelete
  35. thanks alot for this article.
    how can i add it in wordpress in
    techopera and in Jamb result 2013

    ReplyDelete
  36. OMG i just put this code and all my template has changed !!!!

    ReplyDelete
  37. siteme yükledim gayet güzel çalışıyor.teşekkürler.
    sanattarihi ve arkeoloji

    ReplyDelete
  38. çalışmıyor diğer sitemde çalışmıyor..
    hayatın renkleri

    ReplyDelete
  39. visit www.everypremiumpro.blogspot.com

    ReplyDelete
  40. Bro thanx for d post...but how to change the " FONT " of widget bro say me plzz

    ReplyDelete
  41. nice widget but didnt work in my blogs... i've tried in my test blog and in my current blog...not working. just show 4 post but not scrolling...can u help me pls. i removed the 1 java libs and i have only one now.

    my blog: www.arabeegipcio.com

    might u check it out?

    thank u so much

    ReplyDelete
  42. not working i think www.masihpopuler.blogspot.com

    ReplyDelete
  43. Thanks
    my site www.lankanewsmash.com

    ReplyDelete
  44. not work pleas help me at
    kgoswami111@gmail.com

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. hiiii..
    nic....helperblogger.com

    full softwares
    waseemwap.blogspot.com
    fullsoftwareswap.blogspot.com
    fullwap.blogspot.com
    tophack8.blogspot.com

    ReplyDelete
  47. Awesome widgets! Keep it up..
    Bloggers are expecting this types of widget. Thanks.. :)

    ReplyDelete
  48. my widget not working scrolling last 4 days why?

    ReplyDelete
    Replies
    1. My website
      http://resultsandnews.blogspot.com/
      it not scrolling .......... pls give me some suggestion

      Delete
  49. NoT working.. not show post.. Help me..

    ReplyDelete
  50. want make money online for free ,you can visit my site http://ectheme.blogspot.com/
    or contact me with howaves@gmail.com i will teach you step by step

    ReplyDelete
  51. Thank you so much for giving this opportunity. I found this imformation very useful. Thankyou once again
    downloadsoftwaredownload

    ReplyDelete
  52. hi sir your blog is very nice and helpful for bloggers
    http://www.urdushayarisms.com

    ReplyDelete
  53. it is not working in my blog. can u help me? http://valvaiyooraan.blogspot.com

    ReplyDelete
  54. Is there a way to include part of the text from the post instead of comments or date?

    ReplyDelete
  55. Thank you. I will use it on my blog at http://www.hdpeak.net

    ReplyDelete
  56. brother please solve my problem
    the widget first appears but after some seconds it starts to disappearing one by one

    please solve it here is the link http://anltcs.blogspot.com/

    ReplyDelete
  57. What if i wanted to change the color of the rectangles from white to black? how do i go about that?

    ReplyDelete
  58. Not working in my blog brother. Please help me. Thanks!

    ReplyDelete
  59. Awesome sir .....thank you so,much.....

    ReplyDelete
  60. Good blog and the contents are really nice, thanks for sharing here with us.

    parking management
    parking guidance
    parking counting

    ReplyDelete
  61. This site is nice and very useful information!!
    To design web sites or making blogs here many information is there.
    When I Try to Design my blog Free Mcx Tips , Free Stock Tips I found this Site!!! Really very excellent!!!
    Thanks,
    By Mcx Tips , Stock Tips

    ReplyDelete
  62. Thank you been added to I do not move the problem
    This link my blog www.alossra.blogspot.com

    ReplyDelete
  63. I can not copy this code to use in my blog .Please send the code to my email.Please help

    ReplyDelete
  64. it wokred for me, but there is a problem : not all posts titles appear in the wiget. help me please

    ReplyDelete
  65. i have a problem with the widget look please http://lovchat.blogspot.com/

    ReplyDelete
  66. hi...please help...I don't need the dates to appear.How to delete it?

    ReplyDelete
  67. Hello! I can't copy the script..why?

    ReplyDelete
  68. This comment has been removed by a blog administrator.

    ReplyDelete
  69. I note there is a block for POSTSUMMARY but no summary of the post is displayed. How to fix it so that it displays a snippet of the actual post as well?

    ReplyDelete
  70. kindly post how to insert an age calculator widget in blogger

    ReplyDelete
  71. Simple Recent Posts Widget For Blogger
    http://trickzbucket.blogspot.com/2015/11/simple-recent-posts-widget-for-blogger.html

    ReplyDelete
  72. wow, nice
    http://myfreebisnis.blogspot.com

    ReplyDelete
  73. https://allnewfreemovie.blogspot.com/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top