How To Add Breaking News Live Ticker widget in Blogger easy and fast trick(single html code) in 2023

 

Hello friends welcome to your own  khatihelper.blogspot.com blog .So, today we will discuss about making of   News Live Ticker widget in Blogger easy and fast  trick(single html code) in 2022 .

Today, I will give you full information about how to add breaking news /latest post widget slider for each and fastest way .so,please read full article for further information .

NEED TO ADD A BEAUTIFUL BREAKING NEWS WIDGET ?

In present everyone want to start earning through online and social media and the BLOGGING ,YOUTUBE AND SOCIAL MARKETING is the main sources for that as like youtube scope the blogging also a big sources and opportunities .

WHY NEWS TICKER IS SO IMPORTANT ??

As we all know that BLOGGING is the best way for earning in nowadays so when a user visitt your website the news braking ticckr help them to reach your recent posts and they get easy to find the POSTS .

POINTS MATTER FOR NEWS TICKER:-

(1) increae you ctr in Google page 

(2) increase impression to your posts 

(3) make easyim interface for users .etc

+ADding Breaking News Live Ticker widget in Blogger easy and fast  trick(single html code) in 2022

STEP-1 in first step open you blogger layout 

              For that you have to open             BLOGGER.COM and open layout option .

STEP-2 NOW  ,click on add gadget any place you want to add the news ticker i recommn d you to add on header .(as shown on pic)

STEP-3 AFTER That, simply click on HTML/JA

VASCRIPT. 

STEP-4 PASTE THE BELOW CODE ON THIS 

(NOTE-PASTE YOU BLOG URL INSTEAD OF MY BLOGSPOT URL )

<!--[ 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: #0797f1;

  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://polyclayfancy.blogspot.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script>

 

If you have any queries suggetion comment