Breaking News Ticker for Blogger 2022 | News Ticker html code free

Breaking News Ticker

Hi to all, in this article I am going to tell you all about how to add breaking news ticker for blogger websites easily in just one minutes.

What is Breaking News Ticker?

Breaking news ticker is one the information provider or displayer by scrolling or sliding the words or images.

What is the benefit of Breaking News Ticker?

The main benefit of this breaking news ticker is to get extra traffic to your posts written, basically by this ticker you can show your written posts automatically, when a visitor visits your website then they can see the different posts, from there if they found any relevant post then they click on that post and read that post completely and your bounce rate will be in normal condition and also your earnings will also increase by adding this breaking news ticker to your blogger website.

How to add this breaking news ticker in WordPress websites?

If you want to add this ticker in WordPress then there are so many plugins available, you need to download the plugins and install them and use it in your website and some of the top plugins used in WordPress websites are as follow.

• Live News
• Modern News Ticker
• Ticker Ultimate
• jQuery News Ticker
• Ditty News Ticker
• Pro News Ticker
• More....

What happens if we use others ticker code?

Nothing will happens, but you need to change the URL in the ticker code from other website to your website.

Read the below steps carefully and completely if you skip then you definitely get problem with the code coping and modifying.

Note: Before adding the code in your theme, you need to backup your theme code because if any problem comes after saving the code then you can re upload your backup theme code and continue your website as before.

• Must Read: Right Click Disable script for blogger

Steps to Add Breaking News Ticker for Blogger in Theme Section

Step-1: Login to your blogger website dashboard by using your credentials.

Step-2: Click on Layout option.

Step-3: Find where you need to add the breaking news ticker in your blogger website.

Step-4: After selecting the best place you need to click on Add a Gadget.

Step-5: Here you need to select HTML/JavaScript option.

Step-6: Adding title for the gadget is optional.

Step-7: I have provided the code below, before copying you need to edit the code i.e. at the bottom of the code you can see URL there you need to add your website URL so that the your website posts visible there.

Step-8: Click on Copy button and copy entire code.

Step-9: Add the copied code in the gadget you have created and click on Save button.

Step-10: Code is added successfully, now you can see the breaking news ticker, if ticker is not showing in your website then you have made any problem while pasting the code, so you need to  re-check the code again and do the above process and if this you are getting repeated errors then remove the saved code and add your previous backup code gain and run your website. 

• Must Read: How to add call feature in blogger

Breaking News Ticker Code for Blogger:

Change the URL from the below and copy code.

<!--[ 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://www.abcd.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script>
Copy

Demo Video:

Conclusion

If you follow the above written steps then you can easily add breaking news ticker in your blogger website easily in just 1 minute.