How To Add Rss Feed News Ticker In Blogger

In Our Previous Post we showed you how to add a colourful notification bar through HelloBar but in this post we will show you how to add a scrolling Rss feed news ticker as shown above very easily. The Coding Of This Widget Is Little Tough So Follow Each Step Very Carefully.This Widget Is Fully Responsive so it can be loaded in mobile also.It Is Made By Using Font awesome.
So Let's Start Adding This Widget In Your Blog.



1. Go To Blogger >>Template >>Edit Html
2. Press Ctrl+F To Find ]]></b:skin>

3. Just Above It Paste The Following Code-

.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;} .MBL-container-header h2{font-size:30px; text-align:center;}        #MBLnewsticker1 ul { padding: 0px; }.MBLnewsticker {    width: 100%;    overflow: hidden;    height: 440px;    position: relative;    padding: 0 5px;    box-sizing: border-box;    margin: 0 auto;    text-align:center;}.MBLnewsticker>ul {    padding: 0;    margin: 0;    list-style-type: none;    position: relative;}.MBLnewsticker>ul>li {    display: none;    width: 100%;    height: 100px;    background: #FFF;    position: absolute;    overflow: hidden}.MBLnewsticker>ul>li>.MBL-content {    position: absolute;    top: 0;    bottom: 30px;    left: 0;    right: 0;    box-sizing: border-box;    padding: 5%;    overflow: hidden;}.MBLnewsticker>ul>li>.MBL-content a {    text-decoration: none;}.MBLnewsticker>ul>li>.MBL-content a:hover {    text-decoration: underline;}.MBLnewsticker>ul>li>.MBL-info {    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 20px;    padding: 5px;    border-top: solid 1px #DDD;}.MBLnewsticker>ul>li>.MBL-info a {    display: inline-block;    width: 20px;    height: 20px;    background: #0F0;    opacity: 0.2;    cursor: pointer;}.MBLnewsticker>ul>li>.MBL-info a:hover {    opacity: 1;}.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnxsIgXIRjTn3_hlM8NcJp4ZSjGfnUMQWrz5DM4qkNpxhwzK2CFubXTg4tkGj64EdGM5zco-3K1ymnMDEfc2iH4BW4pf8gt_12j9fcHWTraUn67XsaWIlwj8rhkpjuWH0jAKyo7DzAbaS/s1600/buttons-black.png) 0 0 no-repeat;    float: left;    margin-right: 5px;}.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnxsIgXIRjTn3_hlM8NcJp4ZSjGfnUMQWrz5DM4qkNpxhwzK2CFubXTg4tkGj64EdGM5zco-3K1ymnMDEfc2iH4BW4pf8gt_12j9fcHWTraUn67XsaWIlwj8rhkpjuWH0jAKyo7DzAbaS/s1600/buttons-black.png) -20px 0 no-repeat;    float: left;    margin-right: 5px;}.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnxsIgXIRjTn3_hlM8NcJp4ZSjGfnUMQWrz5DM4qkNpxhwzK2CFubXTg4tkGj64EdGM5zco-3K1ymnMDEfc2iH4BW4pf8gt_12j9fcHWTraUn67XsaWIlwj8rhkpjuWH0jAKyo7DzAbaS/s1600/buttons-black.png) -40px 0 no-repeat;    float: left;}.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnxsIgXIRjTn3_hlM8NcJp4ZSjGfnUMQWrz5DM4qkNpxhwzK2CFubXTg4tkGj64EdGM5zco-3K1ymnMDEfc2iH4BW4pf8gt_12j9fcHWTraUn67XsaWIlwj8rhkpjuWH0jAKyo7DzAbaS/s1600/buttons-black.png) -60px 0 no-repeat;    float: right;}.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_CGdFrZkLzu3TWTMu-PMpIBiphjff2_7nHKoZxxNPp3XkiHWeoDYH23u0o5vi6gB_HU9a2ND_cv-oESZvLjjZoW1DOKIYOQdQIUptSjz0KX3030jL7-XaeJAlDbS4xsYStldfZTXoOBf/s1600/buttons-white.png) 0 0 no-repeat;    float: left;    margin-right: 5px;}.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_CGdFrZkLzu3TWTMu-PMpIBiphjff2_7nHKoZxxNPp3XkiHWeoDYH23u0o5vi6gB_HU9a2ND_cv-oESZvLjjZoW1DOKIYOQdQIUptSjz0KX3030jL7-XaeJAlDbS4xsYStldfZTXoOBf/s1600/buttons-white.png) -20px 0 no-repeat;    float: left;    margin-right: 5px;}.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_CGdFrZkLzu3TWTMu-PMpIBiphjff2_7nHKoZxxNPp3XkiHWeoDYH23u0o5vi6gB_HU9a2ND_cv-oESZvLjjZoW1DOKIYOQdQIUptSjz0KX3030jL7-XaeJAlDbS4xsYStldfZTXoOBf/s1600/buttons-white.png) -40px 0 no-repeat;    float: left;}.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_CGdFrZkLzu3TWTMu-PMpIBiphjff2_7nHKoZxxNPp3XkiHWeoDYH23u0o5vi6gB_HU9a2ND_cv-oESZvLjjZoW1DOKIYOQdQIUptSjz0KX3030jL7-XaeJAlDbS4xsYStldfZTXoOBf/s1600/buttons-white.png) -60px 0 no-repeat;    float: right;}.MBLnewsticker>ul>li>.MBL-info span {    position: absolute;    left: 80px;    right: 30px;    text-align: center;    opacity: 0.4;    z-index: 0;    font-size: 13px;    cursor: default;}.MBLnewsticker>div {    width: 50px;    height: 30px;    cursor: pointer;    position: absolute;    opacity: 0.3;}.MBLnewsticker>div:hover {    opacity: 1;}.MBLnewsticker>div.MBL-top-arrow {    top: 0;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBOZfTIzuE4PpkasGQntKaqh1AEfOrfeTfxKIZNoQlIlBoVu9lNUCXpNqjLh6HiW9J_vk6Phg7-K2S3ATraRakxqjejgRrtHJ8hQbHo1aRvA6-I_aKFMSrsKLPK4xmj7fDOdbi7xMUXyW/s1600/arrows-black.png) top no-repeat;}.MBLnewsticker>div.MBL-bottom-arrow {    bottom: 0;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBOZfTIzuE4PpkasGQntKaqh1AEfOrfeTfxKIZNoQlIlBoVu9lNUCXpNqjLh6HiW9J_vk6Phg7-K2S3ATraRakxqjejgRrtHJ8hQbHo1aRvA6-I_aKFMSrsKLPK4xmj7fDOdbi7xMUXyW/s1600/arrows-black.png) bottom no-repeat;}.MBLnewsticker .MBL-top0 {    -ms-transform: scale(0.80);    -webkit-transform: scale(0.85);    transform: scale(0.85);    opacity: 0.85;    top: 0;    z-index: 1;    display: block;}.MBLnewsticker .MBL-top1 {    -ms-transform: scale(0.87);    -webkit-transform: scale(0.9);    transform: scale(0.9);    opacity: 0.9;    top: 20px;    z-index: 2;    display: block;}.MBLnewsticker .MBL-top2 {    -ms-transform: scale(0.95);    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0.95;    top: 45px;    z-index: 3;    display: block;}.MBLnewsticker .MBL-active {    -ms-transform: scale(1);    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1;    top: 75px;    z-index: 10;    display: block;}.MBLnewsticker .MBL-bottom2 {    -ms-transform: scale(0.95);    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0.95;    top: 105px;    z-index: 6;    display: block;}.MBLnewsticker .MBL-bottom1 {    -ms-transform: scale(0.87);    -webkit-transform: scale(0.90);    transform: scale(0.90);    opacity: 0.9;    top: 130px;    z-index: 5;    display: block;}.MBLnewsticker .MBL-bottom0 {    -ms-transform: scale(0.80);    -webkit-transform: scale(0.85);    transform: scale(0.85);    opacity: 0.85;    top: 150px;    z-index: 4;    display: block;}.MBL-easing2 {    transition: .25s linear;    -moz-transition: .25s linear;    -webkit-transition: .25s linear;}.MBL-easing li {    transition: .5s ease-out;    -moz-transition: .5s ease-out;    -webkit-transition: .5s ease-out;}.MBL-radius li {    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;}.MBL-radius2 li {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;}.MBL-shadow li {    -webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);    -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);    box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);}.MBL-shadow-big {    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;}

I Know This Is Quite Big But To Make It Stylish This Code Is Required.

4. Again In Your Template Find </head> Above It Paste The Following Code-

<script type='text/javascript'>/*<![CDATA[*/(function(e) {    $.fn.MBLnewsticker = function(e) {        var t = {            width: "100%",            modulid: "MBLnewsticker",            autoplay: true,            timer: 3e3,            itemheight: 130,            infobarvisible: true,            btnfacebook: true,            btntwitter: true,            btngoogleplus: true,            btnlinkbutton: true,            btnlinktarget: "_blank",            pagecountvisible: true,            buttonstyle: "black",            pagenavi: true,            pagenavistyle: "black",            feed: false,            feedcount: 100        };
        var e = $.extend(t, e);        return this.each(function() {            function o() {                function o() {                    $(e.modulid + ">div").css({                        left: ($(e.modulid).width() - 30) / 2                    })                }                function u() {                    $(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");                    $(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");                    $(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");                    $(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");                    $(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");                    $(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");                    $(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")                }                function a() {                    t--;                    if (t < 0) t = n;                    l()                }                function f() {                    t++;                    if (t == n + 1) t = 0;                    l()                }                function l() {                    $(e.modulid + " ul li").attr("class", "");                    if (t == 0) {                        r[0] = n - 2;                        r[1] = n - 1;                        r[2] = n;                        r[3] = t;                        r[4] = t + 1;                        r[5] = t + 2;                        r[6] = t + 3                    } else if (t == 1) {                        r[0] = n - 1;                        r[1] = n;                        r[2] = t - 1;                        r[3] = t;                        r[4] = t + 1;                        r[5] = t + 2;                        r[6] = t + 3                    } else if (t == 2) {                        r[0] = n;                        r[1] = t - 2;                        r[2] = t - 1;                        r[3] = t;                        r[4] = t + 1;                        r[5] = t + 2;                        r[6] = t + 3                    } else if (t == n) {                        r[0] = n - 3;                        r[1] = n - 2;                        r[2] = n - 1;                        r[3] = t;                        r[4] = 0;                        r[5] = 1;                        r[6] = 2                    } else if (t == n - 1) {                        r[0] = n - 4;                        r[1] = n - 3;                        r[2] = n - 2;                        r[3] = t;                        r[4] = t + 1;                        r[5] = 0;                        r[6] = 1                    } else if (t == n - 2) {                        r[0] = n - 5;                        r[1] = n - 4;                        r[2] = n - 3;                        r[3] = t;                        r[4] = t + 1;                        r[5] = t + 2;                        r[6] = 0                    } else {                        r[0] = t - 3;                        r[1] = t - 2;                        r[2] = t - 1;                        r[3] = t;                        r[4] = t + 1;                        r[5] = t + 2;                        r[6] = t + 3                    }                    u()                }                $(e.modulid + " ul li").css({                    height: e.itemheight,                    background: e.itembgcolor,                    border: "solid 1px " + e.bordercolor,                    color: e.titlecolor,                    "font-size": e.titlefontsize                });                $(e.modulid + " ul li").each(function(t, r) {                    if (e.infobarvisible) {                        i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';                        if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';                        if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';                        if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';                        if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";                        if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';                        i = i + "</div>"                    }                    $(this).append(i)                });                $(e.modulid + " ul li .MBL-content").find("a").css({                    color: e.contentlinkcolor                });                $(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {                    if ($(this).attr("data-type") == "facebook") {                        window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");                        return false                    } else if ($(this).attr("data-type") == "twitter") {                        window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");                        return false                    } else if ($(this).attr("data-type") == "google") {                        window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");                        return false                    }                });                $(e.modulid + " ul li").click(function(e) {                    t = $(this).index();                    l()                });                if (e.pagenavi) {                    $(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>');                    $(e.modulid).css({                        height: e.itemheight + 200,                        padding: "20px 10px",                        width: e.width                    })                } else {                    $(e.modulid).css({                        height: e.itemheight + 160,                        padding: "0px 10px",                        width: e.width                    })                }                o();                $(window).resize(function(e) {                    o()                });                u();                $(e.modulid + ">div").click(function(e) {                    if ($(this).attr("class") == "MBL-top-arrow") a();                    else f()                });                if (e.autoplay) {                    s = setInterval(function() {                        f()                    }, e.timer);                    $(e.modulid).hover(function() {                        clearInterval(s)                    }, function() {                        s = setInterval(function() {                            f()                        }, e.timer)                    })                }            }            function u() {                $.ajax({                    type: "GET",                    url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),                    dataType: "json",                    async: false,                    success: function(i) {                        veri = i.responseData.feed.entries;                        news = "";                        $(veri).each(function(e, t) {                            if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";                            else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"                        });                        $(e.modulid + " ul").html("");                        $(e.modulid + " ul").append(news);                        n = veri.length - 1;                        r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];                        o()                    },                    error: function() {                        $(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">Error! Please try again later...</div></li>')                    }                })            }            e.modulid = "#" + $(this).attr("id");            var t = 0;            var n = $(e.modulid + " ul li").length - 1;            var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];            var i = "";            var s = e.modulid;            if (e.feed != false) {                $(e.modulid + " ul").html("");                $(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">Rss Feed Loading...</div></li>');                u()            } else {                o()            }        })    }})(jQuery)/*]]>*/</script>

5. Save Your Template.
6. Now The Final Step Go to blogger >> Layout >>Add A Gadget >>HTML/JAVASCRIPT
7. Paste The Following Code In The Box-

<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1"><ul> <li> <div class="MBL-content" data-link="http://mybloggerlab.com">Powered by MyBloggerLab (Don't remove or Widget will not work).</div></li></ul> </div>        <script> $(document).ready(function(){  $("#MBLnewsticker1").MBLnewsticker({feed:"http://feeds.feedburner.com/ngtechzone",width:"100%",contentlinkcolor: "#766D6D",timer:5000,titlecolor: "#333",titlefontsize: "16px",itembgcolor: "#FFF",contentlinkcolor: "#766D6D",infobgcolor: "#f2f2f2",bordercolor: "#DDD"});  });</script> 

CUSTOMIZATION-

1. Replace http://feeds.feedburner.com/ngtechzone with any other feed URL. 
2. Replace 100% from the above code, to reduce or increase the width.
3. Replace 5000 with any other digit to increase or decrease the rotation animation of the ticker. 
4. Replace #FFF to change the background color of the info bar in the ticker. 
5. Replace #f2f2f2 to change the background color of the ticker.
6. Replace #DDD to change the border color of the ticker. 
7. Replace #766D6D to change the color of the link appearing in the ticker.

Finally Save The Widget And This Widget Will Be Live On Your Blog. This widget was hard to add so follow steps carefully.

For More Great Posts in Your Inbox Subscribe Us-