How to Add a RSS Feed News Ticker in Blogger Sidebar

Advertisements
In the past, we have showed you how to add a RSS Feed news ticker in blogger with lot possibilities and customizations. However, people are trendier about adding a news ticker in the sidebar of their website. For some obvious reasons, some news tickers are unable to adjust in the sidebar of website because of their large size (horizontal in nature). Therefore, we have developed a flexible, elegant, simple yet highly professional RSS Feeds news ticker for your Sidebar. Today in this article, we will show you how to add a RSS Feed News Ticker in Blogger Sidebar.

You can, see the demo of this widget on this site http://www.faizanali.com/

The very first thing you need to do is to login to your blogger account. After logging in, select the blog you would like to install this widget on and go to Template >> Edit HTML. Now in the template editor, search for the ]]></b:skin> tag and just above it paste the following CSS Codes:

 .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(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
    background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
    background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
    background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
    background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
    background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
    background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
    background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/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(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
    bottom: 0;
    background: url(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/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;
}

Again in the template editor, search for the ending </head> tag and just above it paste the following JavaScript codes (these codes will make the ticker work, so be sure to add it correctly).

<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>

Now to add the widget in the sidebar, Go to Layout >> Add a Gadget >> from the list select “Add HTML/JavaScript” and paste the following code in the HTML text 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/mybloggerlab",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
  });
</script>

Now it’s up to you, if you want to customize the appearance of your ticker you can do it with absolute ease. Take a look at the following codes to learn about the customization of the ticker and usage of the codes:

  1. Replace http://feeds.feedburner.com/mybloggerlab 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.

Once everything is done, save the widget by pressing “Save” button present towards the bottom of the screen window. Congraltuations, you have successfully added a RSS news ticker widget in blogger sidebar.

We hope this tutorial may have helped you in learning how to add a RSS feed news ticker in blogger sidebar. Do share your thoughts about this new improve news ticker widget we have developed by blogspot users. If you like this widget, share it on Facebook, Twitter or Google+.

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!

9 comments

December 20, 2014 at 12:07 PM

Very nice post bro thanks for sharing !

December 20, 2014 at 8:23 PM

Not working on my blog :( plz help me. I set up on my blog with correctly. But not working.

December 21, 2014 at 12:46 AM

Nice information, It would be very useful in the future when I start my blog.. Thank you for sharing !!

Editorial Team MOD
December 21, 2014 at 2:09 AM

Can you please provide your blog URL?

Make sure You have jQuery.js in your blog.

Editorial Team MOD
December 21, 2014 at 2:10 AM

Thanks for liking.

Editorial Team MOD
December 21, 2014 at 2:10 AM

I'm glad you liked it :)

December 21, 2014 at 6:49 PM

Awesome dear! I'll use it when needed.

January 16, 2015 at 8:02 AM

Awesome Widget! Thanks... Peace.

January 19, 2015 at 3:10 PM

Not working on my blog, it just appears as an empty box. tamointernet.blogspot.mx

I have tried like 5 times and it results always the same

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.