Breaking News widget for website HTML Code. It's free to use, These widgets will automatically update with the latest news from your website last posts.
{getToc} $title={Table of Contents}
News Ticker Preview HTML Code-1
HTML Code 1:
<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: 2px;
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://ownerssolutions.blogspot.com/feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script> {codeBox}
News Ticker Preview HTML Code-2
HTML Code 2:
<style>
#latest_posts .meta-tags a{color: #F44A56 !important ;}
#latest_posts{border: solid #F44A56 !important;}
#latest_posts .newsTickerHeadWrap span{border-left-color: #F44A56 !important;}
#latest_posts .newsTickerHeadWrap{background-color: #F44A56 !important}
#latest_posts .meta-tags a, #latest_posts .newsTickerHeadWrap, #latest_posts .slides h3 a{
font-size: 12px; }
</style>
<div id='latest_posts'>
<div class='newsTickerHeadWrap'>
<h2 id="main-heading"><i class="fa fa-fire" aria-hidden="true"></i>
Breaking News:
</h2>
<span></span>
</div>
<div class="directionsBtn">
<i class="fa fa-arrow-left" id='previous' aria-hidden="true"></i>
<i class="fa fa-pause" id='pauseTicker' aria-hidden="true"></i>
<i style='display:none' class="fa fa-play" id='playTicker' aria-hidden="true"></i>
<i class="fa fa-arrow-right next" id='next' aria-hidden="true"></i>
</div>
<ul id='latest_posts_list'>
</ul>
</div>
<script src='https://cdn.rawgit.com/mmnauman/allbloggertricks-files/40616f77/recentPostsWidget.js'></script>
<script>
var blogLink = document.location.origin;
var callScript = document.createElement("script");
callScript.src = blogLink+"/feeds/posts/default?alt=json-in-script&callback=trendingWidgets";
var latest_posts = document.getElementsByTagName('body')[0];
latest_posts.appendChild(callScript);
</script> {codeBox}
Conclusions:
Responsive Breaking News Gadget In Blogger Template,in breaking news widget you can display latest/recent updates of your blogger website.