News Ticker with Thumbnails Blogger Widget

News Ticker with Thumbnails Blogger Widget

If you are not familiar with news ticker widget for blogger sites. don't worry in this article I am going to provide you with full information about a news ticker with a thumbnail blogger widget and also its source code so that you can add this news ticker to your blogger blog.

If you have seen my previously shared news ticker blogger widget then you may have noticed that my previous news ticker widget was not having a thumbnail it was only having posts titles but if you want to show the thumbnails of posts in that news ticker then leave that post and follow this post.

In this post today I am going to provide you with full information about news ticker for bloggers with thumbnails of posts and also going to share with you the source code of this news ticker blogger widget.

Here I have a demo for you of this news ticker which you can see by clicking the button below.

View Demo

This news ticker shows up recent posts from your blog with thumbnails. If you want to add this news ticker with thumbnails blogger widget to your blogger blog follow these steps to do so.

Steps to Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Choose the location where you want to add this news ticker widget.
  5. Select HTML/Javascript Widget from list.
  6. Now copy the code provided below and paste it as widget content.
  7. <div id="content">
        <div class="ticker-wrap">
            <div id="ticker"></div>
        </div>
    </div>
    <style>
        /* CSS News Ticker */
        .ticker-wrap {
            display: block;
            text-align: center;
            margin: 0 20px 20px 20px;
            padding: 2px;
            background: #fefefe;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-left: 5px solid #3598db;
        }
    
        .ticker-wrap > span {
            display: inline-block;
            background: #fefefe;
            padding: 0;
            font: 700 13px 'roboto', sans-serif;
        }
    
        .ticker-wrap > span > a {
            color: #222;
            text-decoration: none;
        }
    
        #ticker {
            height: 45px;
            overflow: hidden;
            background: #fefefe;
            text-align: left;
        }
    
        #ticker ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
    
        #ticker ul li {
            height: 45px;
            white-space: nowrap;
        }
    
        #ticker ul li img {
            float: left;
            width: 35px;
            height: 35px;
            margin: 5px 7px 5px 5px;
        }
    
        #ticker ul li h3 {
            margin: 0;
            font: 700 16px 'roboto', sans-serif;
        }
    
        #ticker ul li h3 a {
            color: #333;
            text-decoration: none;
            line-height: 25px !important;
        }
    
        #ticker ul li .tickermeta {
            font: 400 13px 'roboto', sans-serif;
            line-height: 20px !important;
            color: #999;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        //<![CDATA[
        function getauthor(t) {
            for (var e = 0; e < t.length; e++) var i = t[e].name.$t;
            return i;
        }
    
        function getmeta(t) {
            var e = [];
            (e[1] = 'Jan'), (e[2] = 'Feb'), (e[3] = 'Mar'), (e[4] = 'Apr'), (e[5] = 'May'), (e[6] = 'Jun'), (e[7] = 'Jul'), (e[8] = 'Aug'), (e[9] = 'Sep'), (e[10] = 'Oct'), (e[11] = 'Nov'), (e[12] = 'Dec');
            var i = t.substring(0, 4),
                a = t.substring(5, 7),
                n = t.substring(8, 10),
                r = e[parseInt(a, 10)] + ' ' + n + ' ' + i;
            return r;
        }
    
        function softwebtutsTicker(t) {
            var e = document.querySelector('#ticker'),
                i = t.feed.entry,
                a = "<ul id='ticket-wrapper-inner'>";
            if (i) {
                for (var n = 0; n < i.length; n++) {
                    for (var r = i[n], s = 0; s < r.link.length; s++)
                        if ('alternate' == r.link[s].rel) {
                            var l = r.link[s].href;
                            break;
                        }
                    try {
                        var o = '<img src="' + r.media$thumbnail.url + '"/>';
                    } catch (t) {
                        var o = '';
                    }
                    var u = r.title.$t,
                        c = getauthor(r.author),
                        d = getmeta(r.published.$t);
                    a += '<li>' + o + '<h3><a href="' + l + '">' + u + '</a></h3><div class="tickermeta"><span>' + c + '</span> - <span>' + d + '</span></div></li>';
                }
                (a += '</ul>'), (e.innerHTML = a);
            }
            $('#ticker').vTicker();
        }
        !(function (t) {
            var e = {
                    speed: 700,
                    pause: 4e3,
                    showItems: 1,
                    mousePause: !0,
                    height: 0,
                    animate: !0,
                    margin: 0,
                    padding: 0,
                    startPaused: !1,
                },
                i = {
                    moveUp: function (t, e) {
                        i.animate(t, e, 'up');
                    },
                    moveDown: function (t, e) {
                        i.animate(t, e, 'down');
                    },
                    animate: function (e, i, a) {
                        var n = e.itemHeight,
                            r = e.options,
                            s = e.element,
                            l = s.children('ul'),
                            o = 'up' === a ? 'li:first' : 'li:last';
                        s.trigger('vticker.beforeTick');
                        var u = l.children(o).clone(!0);
                        if ((0 < r.height && (n = l.children('li:first').height()), (n += r.margin + 2 * r.padding), 'down' === a && l.css('top', '-' + n + 'px').prepend(u), i && i.animate)) {
                            if (e.animating) return;
                            (e.animating = !0),
                                l.animate(
                                    'up' === a
                                        ? {
                                              top: '-=' + n + 'px',
                                          }
                                        : {
                                              top: 0,
                                          },
                                    r.speed,
                                    function () {
                                        t(l).children(o).remove(), t(l).css('top', '0px'), (e.animating = !1), s.trigger('vticker.afterTick');
                                    }
                                );
                        } else l.children(o).remove(), l.css('top', '0px'), s.trigger('vticker.afterTick');
                        'up' === a && u.appendTo(l);
                    },
                    nextUsePause: function () {
                        var e = t(this).data('state'),
                            i = e.options;
                        e.isPaused ||
                            2 > e.itemCount ||
                            a.next.call(this, {
                                animate: i.animate,
                            });
                    },
                    startInterval: function () {
                        var e = t(this).data('state'),
                            a = this;
                        e.intervalId = setInterval(function () {
                            i.nextUsePause.call(a);
                        }, e.options.pause);
                    },
                    stopInterval: function () {
                        var e = t(this).data('state');
                        e && (e.intervalId && clearInterval(e.intervalId), (e.intervalId = void 0));
                    },
                    restartInterval: function () {
                        i.stopInterval.call(this), i.startInterval.call(this);
                    },
                },
                a = {
                    init: function (n) {
                        a.stop.call(this);
                        var r = jQuery.extend({}, e);
                        n = t.extend(r, n);
                        var r = t(this),
                            s = {
                                itemCount: r.children('ul').children('li').length,
                                itemHeight: 0,
                                itemMargin: 0,
                                element: r,
                                animating: !1,
                                options: n,
                                isPaused: n.startPaused ? !0 : !1,
                                pausedByCode: !1,
                            };
                        t(this).data('state', s),
                            r
                                .css({
                                    overflow: 'hidden',
                                    position: 'relative',
                                })
                                .children('ul')
                                .css({
                                    position: 'absolute',
                                    margin: 0,
                                    padding: 0,
                                })
                                .children('li')
                                .css({
                                    margin: n.margin,
                                    padding: n.padding,
                                }),
                            isNaN(n.height) || 0 === n.height
                                ? (r
                                      .children('ul')
                                      .children('li')
                                      .each(function () {
                                          var e = t(this);
                                          e.height() > s.itemHeight && (s.itemHeight = e.height());
                                      }),
                                  r
                                      .children('ul')
                                      .children('li')
                                      .each(function () {
                                          t(this).height(s.itemHeight);
                                      }),
                                  r.height((s.itemHeight + (n.margin + 2 * n.padding)) * n.showItems + n.margin))
                                : r.height(n.height);
                        var l = this;
                        n.startPaused || i.startInterval.call(l),
                            n.mousePause &&
                                r
                                    .bind('mouseenter', function () {
                                        !0 !== s.isPaused && ((s.pausedByCode = !0), i.stopInterval.call(l), a.pause.call(l, !0));
                                    })
                                    .bind('mouseleave', function () {
                                        (!0 !== s.isPaused || s.pausedByCode) && ((s.pausedByCode = !1), a.pause.call(l, !1), i.startInterval.call(l));
                                    });
                    },
                    pause: function (e) {
                        var i = t(this).data('state');
                        if (i) {
                            if (2 > i.itemCount) return !1;
                            (i.isPaused = e), (i = i.element), e ? (t(this).addClass('paused'), i.trigger('vticker.pause')) : (t(this).removeClass('paused'), i.trigger('vticker.resume'));
                        }
                    },
                    next: function (e) {
                        var a = t(this).data('state');
                        if (a) {
                            if (a.animating || 2 > a.itemCount) return !1;
                            i.restartInterval.call(this), i.moveUp(a, e);
                        }
                    },
                    prev: function (e) {
                        var a = t(this).data('state');
                        if (a) {
                            if (a.animating || 2 > a.itemCount) return !1;
                            i.restartInterval.call(this), i.moveDown(a, e);
                        }
                    },
                    stop: function () {
                        t(this).data('state') && i.stopInterval.call(this);
                    },
                    remove: function () {
                        var e = t(this).data('state');
                        e && (i.stopInterval.call(this), (e = e.element), e.unbind(), e.remove());
                    },
                };
            t.fn.vTicker = function (e) {
                return a[e] ? a[e].apply(this, Array.prototype.slice.call(arguments, 1)) : 'object' != typeof e && e ? void t.error('Method ' + e + ' does not exist on jQuery.vTicker') : a.init.apply(this, arguments);
            };
        })(jQuery);
        //]]>
    </script>
    <script src="/feeds/posts/summary?alt=json&callback=softwebtutsTicker"></script>
    
  8. Give your widget a Name or leave it blank and click Save

So after following all the steps and pasting the source code into your blog now go and have a look at this news ticker with thumbnails blogger widget.

I hope it will be working fine but you will notice that the posts which are being shown in this new sticker will be from my website if you want to show those posts from your website please replace my website URL with your website URL which is highlighted in the above source code.

Some Extra Customizations:

ReplacementDescription
https://softwebtuts.blogspot.comReplace this URL with your website URL or leave it blank to auto-detect.
speed: 700Replace 700 with the miliseconds.
showItems: 1Replace 1 with the number of posts you want to show.
mousePause: !0Remove ! before 0 if you don't want to stop the animation on mouseover.

Conclusion:

If you want to take my opinion about this news ticker I am going to say that this news is very much interesting and beautiful and gives your website of a premium look.

You may have seen this kind of news ticker on many websites that use owl carousel plugin but this news ticker is independent of that owl carousel plugin.

Related Posts

M.Muzammil

I am a web Designer & Graphics Designer. I love to program and design. Sharing knowledge is my passion & Programming is my Hobby. Want Help? Contact Me its free.!

8 Comments

Add Comment
K K UPGRADER

Bro can you help me how to show label i popular posts and featured post widget?? kkupgrader.blogspot.com

Joel Savage

Thanks a lot, it works on my blog.

M.Muzammil

Thanks for your feedback!

Admin1

Thanks..working@www.khalvontawi.com. How can I show only selected lables not the whole posts in the ticker.

M.Muzammil

To select labelled posts you should use this link https://softwebtuts.blogspot.com/feeds/posts/summary/-/LABELNAME?max-results=20&alt=json-in-script&callback=softwebtutsTicker instead of https://softwebtuts.blogspot.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker change blog address with your and also LABELNAME with your label name.

praswahar.com

Hi, Nice information thanks for sharing the details.

Mohamed Salah EL Mohammadi

Thank you very much pro Please continue to do more