Auto Scrolling Recent Posts


If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:





How to Install Auto Scrolling Recent Posts Widget

Adding The Widget To Blogger

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget



<script type='text/javascript'>
var jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="http://1.bp.blogspot.com/-fKeh7aRkfVs/Tvll57YC8yI/AAAAAAAAAvY/pUwMXLHvSc8/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save





Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size  

ScrollAmount: (0 = No Scroll)
ScrollDelay: (0 = MaxScrollSpeed)

You can only modify the code with red color (variables) according to your requirements, for ex. in case of "var w2bScrollDelay", lower the number, higher  the speed.

How to Install This Widget On 'Blogger' ?



  1. Customize Options in Given Widget Generator Form
  2. Click on Generate Button
  3. Click Preview** Button to see your widget Preview
  4. Finally Click Add to Blogger Button to add this widget on Your blog
**Note:- After changing any values, First Click Generate Button and then See Your Preview
 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size 











Automatic scrolling Recent posts widget will give scrolling of post titles with links


This widget has automated MARQUEE Effect will result scrolling titles




<script type='text/javascript'>
var nMaxPosts = 10;
var nWidth = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/recentpostsscrollerv2-ycode.js' ></script>
<script type="text/javascript" src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script>


Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save





How To Add This Widget :

1. Customize Bellow form and Click on Generate button.

2. And Click Add to Blogger button to add this widget to your blog.












>> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget



Add marquee notification bar to blogger

1. Go to Blogger
2. Login to your Blogger dashboard
2. Select Layout option and select Add a gadget option.
3. Select an HTML/JavaScript Gadget
5. In the HTML/JavaScript widget paste following code and save it.

Add marquee notification bar to blogger





<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px #444444;
-moz-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}

#wc-movtext
{
text-align:center;
padding:8px;
font-family: Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}

#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:yellow;
text-decoration:none;
}


</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee behavior='alternate' direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">

<p>
<a href="http://bit.ly/wmV0kq" target="_blank"><b>How to change mouse cursor in blogger blog to animated cursors</b></a>

| <a href="http://bit.ly/x4d7ln" target="_blank"><b>Numbered Page Navigation For Blogger New Script</b></a>

| <a href="http://bit.ly/vGLd4R" target="_blank"><b>Animated Recent posts for Blogger with Thumbnails - Simple Spy</b></a>

| <a href="http://bit.ly/xqQlgS" target="_blank"><b>17+ Featured Content Slider for Blogger Using jQuery</b></a>



</p>
</marquee>
</div>
<div>


Note: In the following code replace Green color code with your post titles and Red color code with links to these posts.






Many thanks to Harish for making this code and I just tested and modified to work on blogger


72 comments:

  1. like..working, thanks.. :D

    ReplyDelete
  2. Hi,

    I have implemented this in my blogger and it is working fine. Thanks

    ReplyDelete
  3. very nice bro good work i will get many things in your blog thanks alot of you

    ReplyDelete
  4. Hi!

    How can I make that script to work on my site? I want to create auto-backlink to my site too but I can't make it work.

    Maybe you can help me to make this work. Thanks!

    ReplyDelete
  5. wow nice post helped my blog alot www.andhraworld.in thank you...

    ReplyDelete
  6. I read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints. Thanks for sharing it.

    ReplyDelete
  7. Wow that was unusual. I just wrote an very long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say wonderful blog!
    AimIT Software - Software Development company

    ReplyDelete
  8. Is the widget still working? Please do let me know, as I'd like to try it on my blog as well. thanks in advance.

    ReplyDelete
  9. i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.ringtones

    ReplyDelete
  10. recent post widget is the key to engage user for the longer period of time along with it increases pageviews and helps to reduce bounce rate too.so this widget must be overwhelming and attractive and i think your widget has that quality and will work for me .thanks for sharing.seo tips for traffic

    ReplyDelete
  11. Is there anyway to get this scroller widget on my wordpress website?

    ReplyDelete
  12. Hey can u suggest me some social media widgets,

    ReplyDelete
  13. Thankyou so much..... The tutorial on the scroller is very interactive . Just implemented it in my site and it is very helpful

    ReplyDelete
  14. thanks. very good presentation and helpful

    ReplyDelete
  15. I'd be trampled if all sites gave articles like these awesome articles. chris riley

    ReplyDelete
  16. Thumbs up guys you are really carrying out a great job.tyres Edinburgh

    ReplyDelete
  17. see my blog
    http://itfactorytunes.blogspot.com/

    ReplyDelete
  18. thanks dear ..your are real being human that have a helping nature

    ReplyDelete
  19. Thanks...Its working on my site.Its really Wonderful Widget

    Thank u so much for sharing with us

    ReplyDelete
  20. Thanks it works perfect but one thing i notice is it delay before it start scrolling, i want it to start scrolling almost immediately, check my blog and see it http://ask9ja.blogspot.com

    ReplyDelete
  21. great.. thanks.... finally i found this tips

    ReplyDelete
  22. sir very nice work and nice website....

    ReplyDelete
  23. I read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints. Thanks for sharing it.

    ReplyDelete
  24. I am very to find your website. It is very helpful for me; Thanks for providing it.

    ReplyDelete
  25. Thanks For Nice Sharing. I Like To Used It. helpful

    ReplyDelete
  26. I need to background music html codes. help me

    ReplyDelete
  27. VERY NICE WORKING
    BUT I WANT TO GAIB BETWEEN 1ST AND SECOND WRITTING.
    WWW.LUSHDUNYA.BLOGSPOT.COM

    ReplyDelete
  28. Thanks for the wonderful tip. I want to inquire if you could give a tip on how to get the kind of notification bar at the top of this webpage. That is the notice bar having Latest News appearing in text typewriter animated format as seen on this page above.

    ReplyDelete
  29. Blog face Beauty..
    Thnxs for uploaded
    jehan zeb khan

    ReplyDelete
  30. I think it will help bloggers to give new look to blog.

    ReplyDelete
  31. Hi. I wanted to drop you a quick note to express my thanks. I've been following your blog
    for a month or so and have picked up a ton of good information as well as enjoyed the way you've structured your site. I am attempting to run my own blog but I think its too general and I want to focus more on smaller topics. Being all things to all people is not all that its cracked up to be


    Logo Design

    ReplyDelete
  32. Thanks, good post. I'll share it with all the techi truckies out on the road looking for decent ferry routes and freight quotes online.

    ReplyDelete
  33. great really good post. I had some issues building the script but the widget now works.

    ReplyDelete
  34. i like this.....! can i use it broo...?

    ReplyDelete
  35. just awesome widgets thanks for sharing,

    ReplyDelete
  36. this is a cool tricks,,, thanks

    ReplyDelete
  37. thanks work good ,
    visite my site
    http://kastream.blogspot.co.il/

    ReplyDelete
  38. Thanks for widget....Please do visit my tech blog : Think Different Zone

    ReplyDelete
  39. Installed at my Blog: http://nutritionistclinic.blogspot.com/ you can check it out

    ReplyDelete
  40. hi, how to make auto scrolling for recent post just like yours..

    ReplyDelete
  41. I read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints.

    ReplyDelete
  42. Great man nice way of getting a do follow backlink

    ReplyDelete
  43. I want to add like your scrolling style.....
    Please tel me the HTML code.......Please Help

    ReplyDelete
  44. I am impressed with your writing style and presentation of viewpoints...!!

    ReplyDelete
  45. working, thanks very much on my blog http://www.coroanafunerara.net

    ReplyDelete
  46. Thanks for such a great tutorial. Its working great.

    ReplyDelete
  47. Really a great widget for blogger..
    Download & Watch Online Hollywood (In English And Hindi) , Bollywood & Lollywood Movies For Free Without Any Survey...
    Visit Here http://onlinemoviesworldforfree.blogspot.com/

    ReplyDelete
  48. Nice article sir, I love to read this types of articles. Thanks a lot to share with us......Ind Govt Jobs, Latest Recruitment, Latest Employment News.

    ReplyDelete
  49. The you very much friend. This guide made my blog looking fat better. Keep this up.

    ReplyDelete
  50. good working on blogger.

    To see new and latest offers just visit http://sublayjao.blogspot.com


    Features of our site
    *BOOKS
    *CONVERTORS
    *DATA RECOVERY
    *DRIVERS
    *FUNNY IMAGES
    *GAMES
    *LIVE CHANNELS
    *MAGAZINES
    *TOOLS
    *TUTORIALS
    *VIDEOS

    ReplyDelete
  51. please give me the generator link! it dont work!

    ReplyDelete
  52. Nice tutorial buddy... :)

    I have just added one to my blogger using this guide.

    Everybody will be happy to use it.

    ReplyDelete

 
Top