RSS Feeds News Update Ticker For Blogger - Works Automatically

Advertisements

After the sensational success of Scrolling News Update Headline Tickerfor Blogger and due to the large number of requests we received from our loyal readers, we are so delighted to present you the fresh and enhanced version of headline ticker which is enhanced with RSS Feeds so we don’t need to update our ticker again and again, which means it will update automatically with the help of RSS Feeds. Getting our readers up to date is the most significant task for a blogger but due to stretched (tuff) schedule most of blogger are unable to notify their visitors with their latest Featured posts. This is the reason why we have coded a brand new Headline Ticker which will update automatically, so we can sit back and enjoy a cup of tea while our ticker updates on automation.

I know you would love to Preview the widget so before we proceed to our tutorial, let us look at the live demo of this widget.


Features of RSS Feed Automatic Update Ticker:

  • Compatible with all Browsers i.e. Chrome, Firefox, Internet Explorer and etc
  • Works on automation with the help of RSS Feeds
  • Optimized with attractive JQuery shutter effect
  • No compromise in site speed
  • Fully optimized with JavaScript
  • Easy To Customize

Adding Ticker’s Style Sheet CSS in Blogger:

To insert MBL RSS Feed Headline ticker in blogger blog follow these steps.
  • Step# 1: Go To Blogger.com >> Your Blog
  • Step# 2: Now Select Template >> Backup Template
  • Step# 3: Now Press Edit HTML >> Proceed
  • Step# 4: Then Search for the following code in the template.
]]></b:skin>

  • Step# 5: When You Found ]]></b:skin> just above it paste the following code.

/*  MBL RSS Feed Headline ticker Style Sheet */
#feed-container {
 width: 920px;
    margin: 0;
    padding: 5px 5px 5px 36px;
    border: 1px solid #c8c8c8;
    vertical-align:middle;
    overflow: hidden;
    -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
    background: #e8e8e8 url('http://1.bp.blogspot.com/-vwja9s9uCsc/T6gVtj6SeCI/AAAAAAAABsI/wl6bvgL8kII/s1600/1.png') no-repeat 10px 50%;
    min-height: 25px;
}
#feed-content ul {
 font-family: "Lucida Grande","Lucida Sans Unicode", Helvetica, Arial, inherit;
 font-size: 18px;
 line-height: 20px;
 color: black;
 width: 100%;
 list-style:none;
 margin: 0;
 padding: 0;
}
a:link {
    color:#333;
    text-decoration:none;
    outline: none;
}      /* unvisited link */
a:visited {
 color:#333;
 text-decoration:none;
}  /* visited link */
a:hover {
 color:#333;
 text-decoration:underline;
}  /* mouse over link */
a:active {
 color:#333;
 text-decoration:underline;
}  /* selected link */


Customization: 
To change the width of the ticker simply replace 920px 
To change the height of the ticker simply replace 20px 
To change font size simply replace 18px


Step# 6: After customizing Save the template by pressing Save Now button

Adding HTML and Java Script Coding in Blogger:

To Add JavaScript in Blogger Follow these steps
  • Step# 1: Go To Blogger.com >> Your Blog
  • Step# 2: Now Select Layout >>Now Press Add a Gadget
  • Step# 3: Now Select Add Html/JavaScript And Paste The Following Code
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.vticker.js"></script>
<script type="text/javascript">
var feed_limit = 10;
var feedURL = "http://feeds.feedburner.com/mybloggerlab";
var animation_duration = 700;
var pause_time = 7000;
var target = "_top"; // "_top" (same) or "_blank" (new window)

function loadrssfeed() { 
 var options = {
  date: true,
  content: true,
  snippet: false,
  showerror: true,
  errormsg: '',
  key: null
 }; 

 return $(this).each(function(i, e) {
  var $e = $(e);
  
  if (feedURL == null)
   return false;

  var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + feedURL;
  if (feed_limit != null) api += "&num=" + feed_limit;
  if (options.key != null) api += "&key=" + options.key;

  $.getJSON(api, function(data){ 
   // Check for error
   if (data.responseStatus == 200) {
    // Process the feeds
    _callback(e, data.responseData.feed, options);
   }
  });    
 });
}

function rss_truncate(str, length, suffix) {
    if (str.length <= length) {
        return str;
    }

    if (suffix == undefined) {
        suffix = '...';
    }

    return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
}

// Callback function to create HTML result
var _callback = function(e, feeds, options) {
 if (!feeds) {
  return false;
 }
  
 for (var i=0; i<feeds.entries.length; i++) {
  var entry = feeds.entries[i];
  var html = '<li><a href="'+entry.link+'" target="'+target+'" title="Read this feed at '+ feeds.title +'">'+rss_truncate(entry.title, 70)+'</a></li>';
  $('#feed-content ul').append(html);
 }

    $('#feed-content').vTicker({ showItems: 1, mousePause: true, pause: pause_time, speed: animation_duration});
}

function stoptransition()
{
 if (timer)
 {
  clearTimeout(timer);
  $(':animated', iframe_display).stop(true, true);
 }
  
  autoplay = false;
 timer = null;
}
      
$(document).ready(function() {
 loadrssfeed();
});

</script><body style="background-color: transparent; margin: 0pt;">
<div id="feed-container">
<div id="feed-content"><ul></ul></div>
</div>

Customization:
Replace http://feeds.feedburner.com/mybloggerlab With your Feed URL. If you don't have FeedBurner then learn How To Burn Your Blog Feeds 


  • Step# 4: After customizing Save the Widget by pressing Save button. And now visit your blog and it will be a photo finish.

From the Editor's Desk:

So that's how you can insert Animated Rss Feed Ticker in Blogger blogspot blogs. This Widget will not only improve your traffic but it will also make your blog look more attractive. If you face any difficulty while adding this widget feel free to ask till then peace, blessings and happy ticking.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

14 comments

May 8, 2012 at 8:44 AM

Not successful in doing. I have seen it in your test blog.But not working in my blog.Faizan, can you do it for me if I give you admin access?? Please mail me at daniel.rechey28@gmail.com or parigyan@live.com

Editorial Team MOD
May 8, 2012 at 11:13 AM

@Parigyan Tamuly
Ok Brother I will Do it For You Check Your Email :). Peace Pal

May 9, 2012 at 8:18 AM

Worked great, thanks a bunch!

Editorial Team MOD
May 9, 2012 at 9:21 AM

@Amanda Stephan
Its Our Pleasure Thanks For Liking The Widget. Peace

May 18, 2012 at 3:48 AM

Good tutorial. Any idea how to use the effect to make a twitter ticker?

Editorial Team MOD
May 18, 2012 at 5:33 AM

@Ronny Deddy Rondonuwu
Thanks For Liking it Bro its very Simply Just Follow the same Steps But Instead Of Your Website FEED Insert Your Twitter Feed. To do so First Burn Your Twitter Feed by going to Feedburner.com And Insert its URL by following same steps. And it will become a RSS FEED Automatically Tweet Ticker. Don't worry soon we will share complete tutorial on it Peace Buddy.

May 18, 2012 at 7:21 AM

Thanks for the fast response. But actually I want the text (the tweets) can move across the screen horizontally, from left to right..

Editorial Team MOD
May 18, 2012 at 9:29 AM

@Ronny Deddy Rondonuwu
You Mean Scrolling Tweets, Ok Buddy We will Work On this Widget As Currently Their is no Widget Which Is capable of doing it You Can use Manual Widgets. So A soon as we Got Success we will Share it Stay Tuned. Peace Buddy

May 18, 2012 at 7:10 PM

I hope you will find it. For sure, i will check out your blog regularly because they are useful.

Editorial Team MOD
May 18, 2012 at 11:35 PM

@Ronny Deddy Rondonuwu
Yes Brother If we don't find it we will develop it for you, as readers are most important for us, Peace

March 26, 2013 at 2:52 PM

I continually receive this error:
-----
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "callback" must end with the ';' delimiter.

Error 500
-----

I assume the javascript is not written properly. I found if I added a ';' to: 'var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + feedURL;' to make it: 'var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback;=?&q=" + feedURL;

I then receive this error:
-----
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity "callback" was referenced, but not declared.

Error 500
-----

Any idea how to get it to work?

Editorial Team MOD
March 27, 2013 at 11:28 PM

Exactly, this coding is not suitable to be inserted in Template's coding you have to paste them as a gadget in "Html/JavaScript" area. However, if you want to add the same JavaScript in template then do let us know so we can make this Coding compatible with Your Template coding.

September 28, 2013 at 3:26 AM

Its not working bro, why ?

Editorial Team MOD
September 28, 2013 at 6:03 AM

Problem with API, Would update the code soon. Thanks

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.