ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

Add A Stylish News Slider/Scroller to Blogger: How To

Add A Stylish News Slider/Scroller to Blogger: How To

I’ve been receiving few emails from Shoutmeloud readers, as well as those from my very own blog, who wanted a news slider/scroller widget on their blogger templates. So, I’ve designed a simple and stylish news reader that shall slide vertically using Dojo JavaScript. These sliders are more often used on sidebars to display tweets, recent comments, related/popular articles and other text related news. So, if you still don’t have an idea about the same, then take a look at the screen shot below.

news feed tut Before I proceed with the article, I would like to inform you know that this widget will load pretty faster than what you actually think since, the main library file is fetched from Google APIs and the custom script is defined internally. So, no worries about page speed! Secondly, the slider was tested to work perfectly the same on all major browsers that includes, but not limited to, FF, Chrome, Safari and Opera. So, no worries about browser compatibility as well:)

It’s better to create a backup copy of your template before you make some changes to it. So, navigate to “Desgin >> Edit HTML” page from your blogger dashboard and click “Download Full Template” to create your back up. Now, search for the following line in your template.

]]></b:skin>

Replace the above line with the following block of code.

#news-feed-bg{background:url(https://lh3.googleusercontent.com/-mX_nvvcc4Aw/TmWxKjV7aOI/AAAAAAAABi4/1FgVxB727A4/s800/bow-1.png) no-repeat; height:60px; width:60px; display:block; margin-top:0px; margin-left:240px; margin-right:0px;}
#news-feed   { height:160px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; margin-bottom:10px;}
#news-feed ul  { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin-top:10px;}
#news-feed ul li { min-height:160px; font-size:12px; padding:10px; overflow:hidden; text-align:justify; font-family:Georgia,"Times New Roman",Times,serif;}
#news-button a{color:#fff;  text-decoration:none;  float:right;  font-family:Georgia,&quot; Nimbus Roman No9 L&quot; ,serif; font-style:none;  padding-left:5px; padding-right:5px; padding-top:2px; font-size:13px;  font-weight:bold;  text-align:center; margin-bottom:0px;  margin-top:10px; background:#444343;  height:22px}
#news-button a:hover{color:#FFF;  text-decoration:none;  background:#7b7b7b;}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js' type='text/javascript'/>
<script type='text/javascript'>
		if(false) {
		dojo.addOnLoad(function() {
			/* settings */
			var list = dojo.query('#news-feed ul')[0],
				items = dojo.query('li',list),
				showDuration = 3000,
				scrollDuration = 500,
				scrollTopDuration = 200,
				index = 0,
				interval;
			/* movement */
			var start = function() { interval = setInterval(move,showDuration); };
			var stop = function() { if(interval) clearInterval(interval); };
			var reset = function() {
				dojo.animateProperty({
					node: list,
					duration: scrollTopDuration,
					properties: {
						top: 0
					},
					onEnd: start
				}).play();
			};
			/* action! */
			var move = function() {
				dojo.animateProperty({
					node: list,
					properties: {
						top: (0 - (dojo.coords(items[++index]).t))
					},
					duration: scrollDuration,
					onEnd: function() {
						if(index == items.length - 1) {
							index = 0-1;
							stop();
							setTimeout(reset,showDuration);
						}
					}
				}).play();
			};
			/* stop and start during mouseenter, mouseleave  */
			dojo.connect(list,'onmouseenter',function() { stop(); });
			dojo.connect(list,'onmouseleave',function() { start(); });
			/* go! */
			start();
		});
	}

	dojo.require(&quot;dojo.NodeList-fx&quot;);
			dojo.addOnLoad(function() {
				/* settings */
				var list = dojo.query('#news-feed ul'),
					items = list.query(&quot;li&quot;),
					showDuration = 3000,
					scrollDuration = 500,
					scrollTopDuration = 200,
					index = 0,
					interval;

				/* movement */
				var start = function() { interval = setInterval(move,showDuration); };
				var stop = function() { if(interval) clearInterval(interval); };
				var reset = function() {
				    list.anim({ top: 0}, scrollTopDuration, null, start);
				};
				/* action! */
				var move = function() {
				    list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
						if(index == items.length - 1) {
							index = 0-1;
							stop();
							setTimeout(reset,showDuration);
						}
				    });
				};

				/* stop and start during mouseenter, mouseleave  */
				list.onmouseenter(stop).onmouseleave(start);

				/* go! */
				start();
			});

</script>

Next, search for the following piece of code.

<div id='sidebar-wrapper'>

Add the following block of code just below/after the line you searched for. If you don’t find the code mentioned above, don’t worry! You can add the ones mentioned below as a gadget.

<div id='news-feed'>
<div id='news-feed-bg'/>
<ul style='top: -400px;'>
<li>
<strong style='font-size: 20px;'>NEWS TITLE ONE</strong><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span id='news-button'><a href='#'>Read More</a></span></li>
<li><strong style='font-size: 20px;'>NEWS TITLE TWO</strong><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span id='news-button'><a href='#'>Read More</a></span></li>
<li><strong style='font-size: 20px;'>NEWS TITLE THREE</strong><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span id='news-button'><a href='#'>Read More</a></span></li>
<li><strong style='font-size: 20px;'>NEWS TITLE FOUR</strong><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span id='news-button'><a href='#'>Read More</a></span></li>
</ul>
</div>

Just make sure you replace “NEWS TITLE ONE”, “NEWS TITLE TWO” and so on.. with your titles. Similarly, replace the content (Lorem ipsum…) with your content corresponding to the titles. Don’t forget to link the article (Replace # with the URL to your link in the anchor tag) to the respective page before you save the template.

I hope you enjoyed this widget. If you need some assistance in customizing the above widget, then let me know via comments and I’ll clarify your doubts. Do shout your opinions about the widget via comments.

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 26 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 7 comments… add one }

  • shenoyjoseph

    thanks for providing new widget for blogger platform and i m really happy to see new slider to attract visitors click on that post :)

    Reply
  • vishnu

    @ Mukund : Thank you Friend ,I think Your r a Great Xml Editor right ! an image slider is bigger better u can reduce the size

    Reply
  • Mukund

    @Gowtham: May be! But, I always prefer self designed widgets than those on blogger:)

    Reply
  • vishnu

    hi friend will you post the screen shot how the slider looks like, so it can be easy for users to whether to add this code to blogger or not

    Reply
  • Sagar

    hey that looks cool :D, will add it to my blog, thanks Mukund ;)

    Reply
    • Mukund

      Yup! Thanks buddy! Hope you enjoy the upcoming widgets as well:)

      Reply

Leave a Comment