RSS Feeds News Update Ticker For Blogger - Works Automatically

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.

MBL Animated RSS FEED News Update Ticker For Blogger

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShMukVAiZfSYZZCAR2zyayM-Z86_KQhgl4plrgAbAfw0ue1NHb_ObDEqnOFVnk1BNfc3eogLXCyvXxlp5XPmrfFY77vh61KUHiXl6tWFO4sQAm6XtPJTaPTxuqBbFT87QUPubgD-yczk/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://bsresearcher.blogspot.com/Scripts/jquery-min.js"></script>
<script type="text/javascript" src="http://bsresearcher.blogspot.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.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

RSS Feeds News Update Ticker For Blogger - Works Automatically

4/ 5

By Editorial Board

Posted By Editorial Team On May 07, 2012 Comment