Best Breaking News ticker Widget For Blogger 2023.(Updated Design)

Do you have a Breaking news widget for bloggers? This widget will be very helpful for bloggers.

Recently I developed Advance Breaking News widget for bloggers in 2023. That is a useful widget that can help you to display the latest news on the sidebar or top header bar of your blog.

Advance Breaking News with title & image Widget for Blogger.[New Version 2023]

I created a simple tool that you can add to your site to automatically put the latest news from RSS feeds into a pretty magazine-style layout. The widget automatically resizes itself depending on how much space it has available.

What is Advance Breaking News Widgets or ticker For Blogger?

Breaking news widget allows you to easily add the most recent news from any source (your Blogspot blog or external site) as a live ticker into your sidebar or top of the header.

Breaking news widgets are perfect for when you want to display breaking news stories on your website. They are also great for any page in your blog.

Breaking news widgets effectively deliver current events right to the audiences that are most interested in learning more.

Breaking news widgets for bloggers is an effective way to attract visitor attention and increase the number of views on your website. Moreover, breaking news can stay in the Google news feed for several minutes, bringing additional traffic to your site for an extended period. Even if breaking news doesn’t take off, your website will benefit from the added exposure if it does.

Some features of Advance Breaking News or ticker

I made it in a way in which you can display the latest news for your blog in various styles. Some of the Amazing features are listed below.

• Easy to use and install
• install in the header, sidebar, and between any post
• Show the latest and oldest post with title and image
• You can use it in your template layout section
• Display your post faster and easier
• Advance level coding
• Unique looks from another ticker widget
• Great look in dark mode and light mode
• It shows many posts
• You can change background, color, and font only

You may want to read these posts:

• Best Gradient Subscribe Box on Blogger.
• Install Dark Mode With Cookies 2023
• Protect Adsense From Invalid Click
• Install Stylish 404 Error Page For Blogger 2023

How to install Advance Breaking News ticker with image & title for Blogger 2023?

No skills and tricks need to install on blogger. It is too simple to install, you must follow the below step carefully.

1. First, Open Your Blogger dashboard
2. Open Layout section
3. Find where you want to install after that
4. Click add a gadget then HTML/JavaScript
5. And copy below code paste into the content section then Click save

Preview

<!--[ Breaking News Ticker Code ]-->

<div id="content">
<div class='ticker-wrap'>
<div id='ticker'>
</div></div></div>
  <style>
  /* CSS News Ticker */

.ticker-wrap {
  display: block;
  border-top-left-radius: 21px;
  text-align: center;
  margin: 0 0px 20px 0px;
  padding: 5px;
  background: #fefefe;
  border-left: 5px solid #db3535
}

.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;
  border-top-left-radius: 11px;
  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: #f10707;
  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://btoolsbox.blogspot.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script>

Note; Replace URL with your site URL in section. Do not try to modify or change any code otherwise it not work.

Conclusion

I hope you friend you like this post on Advance Breaking News Widget for Blogger. If you have any problems regarding this post please comment below.

For more information on Blogger Widget Stay with the Btoolsbox website.

FAQ

Is Advance Breaking News Widget Available in a free version?

Yes, It is free, you no need to pay any cost to use it.

Is it 100% Responsive for Mobile and PC?

Yes, bro, it is 100% safe and responsive with advanced-level coding. Great view on both devices (Mobile and PC).

You can check it yourself.

Is it null or hack script?

No, it is not a hack or null/crack script. It is a Fully SEO and Users-Friendly Script.

How to use Advance Breaking News widget?

Copy all code then paste in the layout section. For more read the above text carefully.

Any problems feel free to contact me.