News Ticker with Thumbnails Blogger Widget

News Ticker with Thumbnails Blogger Widget

News Ticker with Thumbnails Blogger Widget

If you are not familiar with news ticker widget for blogger don't worry in this article I am going to provide you full information about news ticker with thumbnail blogger widget and also its source code so that you can add this news ticker into 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 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 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 into 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 locaion 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 a 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='https://www.softwebtuts.com/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 of 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 that 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://www.softwebtuts.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 wan't to stop animation on mouse over.

Conclusion:

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

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

9 Comments

Help us improve this article by leaving your feedback below.
  1. Mohamed Salah EL Mohammadi
    Mohamed Salah EL Mohammadi 17 Apr 2020, 23:53:00

    Thank you very much pro Please continue to do more

    Reply Delete
  2. praswahar.com
    praswahar.com 7 May 2020, 13:59:00

    Hi, Nice information thanks for sharing the details.

    Reply Delete
  3. Admin1
    Admin1 18 Nov 2020, 19:51:00

    [email protected] How can I show only selected lables not the whole posts in the ticker.

    Reply Delete
  4. Joel Savage
    Joel Savage 5 Dec 2020, 00:36:00

    Thanks a lot, it works on my blog.

    Reply Delete
  5. K K UPGRADER
    K K UPGRADER 17 Sept 2021, 23:13:00

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

    Reply Delete
  6. Mohan
    Mohan 13 Nov 2021, 06:55:00

    Sir very good work from you. Thanks a lot. And My great request to you please add "prev", "stop" and "play" button controls also. Thank you.

    Reply Delete
Add Comment
Previous Post Next Post