News Ticker with Thumbnails Blogger Widget
close
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.
Disqus Codes

No comments

Notifications

Disqus Logo