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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVSgopBg0plrH6rBrek9xe6T8dF_qofbqncegOnEXBYQhZS8hFRF4Iv39sdjv_1YP-DArtafMS7KUtkeNju4MtH1HtM6ktyv-c0W7jhNvq4WJ76_sLFNQOZwPfBx_l8y4wX-sIhn3gnYk/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>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVSgopBg0plrH6rBrek9xe6T8dF_qofbqncegOnEXBYQhZS8hFRF4Iv39sdjv_1YP-DArtafMS7KUtkeNju4MtH1HtM6ktyv-c0W7jhNvq4WJ76_sLFNQOZwPfBx_l8y4wX-sIhn3gnYk/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' ?
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&callback=RecentPostsScrollerv2&max-results=10 " ></script>
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&callback=RecentPostsScrollerv2&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.
<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>
#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
like..working, thanks.. :D
ReplyDeleteHi,
ReplyDeleteI have implemented this in my blogger and it is working fine. Thanks
This was too good mate thanku
ReplyDeletethank u it was working
ReplyDeletevery nice bro good work i will get many things in your blog thanks alot of you
ReplyDeletethanks, it helps me a lot :-)
ReplyDeleteHi!
ReplyDeleteHow 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!
wow nice post helped my blog alot www.andhraworld.in thank you...
ReplyDeleteI read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints. Thanks for sharing it.
ReplyDeleteWow 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!
ReplyDeleteAimIT Software - Software Development company
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.
ReplyDeleteCool Widget!
ReplyDeleteThanks..
Is there anyway to get this scroller widget on my wordpress website?
ReplyDeleteHey can u suggest me some social media widgets,
ReplyDeleteThankyou so much..... The tutorial on the scroller is very interactive . Just implemented it in my site and it is very helpful
ReplyDeletethanks. very good presentation and helpful
ReplyDeleteI'd be trampled if all sites gave articles like these awesome articles. chris riley
ReplyDeleteThanks for sharing this post.
ReplyDeleteAutomotive components manufacturers
Thumbs up guys you are really carrying out a great job.tyres Edinburgh
ReplyDeletesee my blog
ReplyDeletehttp://itfactorytunes.blogspot.com/
Thxs Gan ...
ReplyDeletethanks dear ..your are real being human that have a helping nature
ReplyDeleteThanks...Its working on my site.Its really Wonderful Widget
ReplyDeleteThank u so much for sharing with us
good
ReplyDeleteThanks for sharing
ReplyDeletegreat.. thanks.... finally i found this tips
ReplyDeletenice & thanks
ReplyDeleteI read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints. Thanks for sharing it.
ReplyDeleteI am very to find your website. It is very helpful for me; Thanks for providing it.
ReplyDeletevery nice for share
ReplyDeletethink
ReplyDeleteThanks For Nice Sharing. I Like To Used It. helpful
ReplyDeleteThanks cuk..
ReplyDeletevery nice boys
ReplyDeleteI need to background music html codes. help me
ReplyDeleteVERY NICE WORKING
ReplyDeleteBUT I WANT TO GAIB BETWEEN 1ST AND SECOND WRITTING.
WWW.LUSHDUNYA.BLOGSPOT.COM
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.
ReplyDeleteBlog face Beauty..
ReplyDeleteThnxs for uploaded
jehan zeb khan
Super article I will use this on my movie blog http://guruofmovie.blogspot.in/
ReplyDeleteI think it will help bloggers to give new look to blog.
ReplyDeleteHi. I wanted to drop you a quick note to express my thanks. I've been following your blog
ReplyDeletefor 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
I’m impressed with your views
ReplyDeletebuy essays for college
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.
ReplyDeletegreat really good post. I had some issues building the script but the widget now works.
ReplyDeletei like this.....! can i use it broo...?
ReplyDeleteNice system
ReplyDeletejust awesome widgets thanks for sharing,
ReplyDeletethis is a cool tricks,,, thanks
ReplyDeletethanks work good ,
ReplyDeletevisite my site
http://kastream.blogspot.co.il/
Thanks for widget....Please do visit my tech blog : Think Different Zone
ReplyDeleteInstalled at my Blog: http://nutritionistclinic.blogspot.com/ you can check it out
ReplyDeletehi, how to make auto scrolling for recent post just like yours..
ReplyDeleteI read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints.
ReplyDeleteGreat man nice way of getting a do follow backlink
ReplyDeleteI want to add like your scrolling style.....
ReplyDeletePlease tel me the HTML code.......Please Help
I am impressed with your writing style and presentation of viewpoints...!!
ReplyDeleteworking, thanks very much on my blog http://www.coroanafunerara.net
ReplyDeleteThanks for such a great tutorial. Its working great.
ReplyDeleteReally a great widget for blogger..
ReplyDeleteDownload & Watch Online Hollywood (In English And Hindi) , Bollywood & Lollywood Movies For Free Without Any Survey...
Visit Here http://onlinemoviesworldforfree.blogspot.com/
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.
ReplyDeleteThe you very much friend. This guide made my blog looking fat better. Keep this up.
ReplyDeletegood working on blogger.
ReplyDeleteTo 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
Nice blogger Widgets
ReplyDeleteplease give me the generator link! it dont work!
ReplyDeleteNice tutorial buddy... :)
ReplyDeleteI have just added one to my blogger using this guide.
Everybody will be happy to use it.
Thanks :D
ReplyDeleteRhonztech.blogspot.com
Thanks you so Much. Its working :)
ReplyDeleteGood and Informative.
ReplyDeleteBut I Got different Issue on my blog...please check 4vnu
How can I add.
Works perfectly here! Thanks alot for your help!
ReplyDeleteVerry nice.
ReplyDeleteI read through your article with much interest and thought. I am impressed with your writing style and presentation of viewpoints. Thanks for sharing it.......
ReplyDeleteUSA Top Ads Posting Site
Thanks.
ReplyDeleteNice Tutorial.... But i want to make autoscrolling widgets same like your blogs widgets,. i hope u will help me .
ReplyDeletethanks for sharing!!!
ReplyDeleteit's nice
ReplyDeleteSuper Tricks
ReplyDeleteThanks a lot
Fantastic post - Great explainations and thinking.I'm looking forward to what you have for us next..!
ReplyDeleteAutomotive Tools
great tutorial, but any tutorial visit : Make a Widget Scroll in Blogger
ReplyDeletethanks
Thanks for the post. People who wants their webpage to look more amazing and interesting may also take help from the after effects templates as they are specially designed so as to make their task look more appealing.
ReplyDeleteI gonna test this gadget at my new blog, if it works good I'll add this to my next blog too. here it is London Clicks
ReplyDeletethankyou usefull, visit my website : www.codexrldgames.com
ReplyDeleteHow to add Latest News exactly like your blog? The current code gives me different design. I want to add same as yours. Kudos to your good work!! Love ur blog.
ReplyDeleteGreat post Match Prediction
ReplyDeleteTHANKS, BUT IS BUZZY
ReplyDeletenice post.. thanks for sharing.
ReplyDeleteautomotive seo
Nice sharing, I have question
ReplyDeletehow to create a window which you share in style code
Thank you so much it really worked for me .. http://www.merokuraa.com
ReplyDeleteReally working. Thanks
ReplyDelete