यहाँ आपको दो Code देने जा रहे हैं। पहला code Breaking news ticker in blogger template के लिए है तथा दूसरा Code आपके Blogger को Fade करने के लिए है। Fade का मतलब जब आपके blog को open करेगा तो वहाँ उसे Blog Smoothly open होता दिखेगा। जो कि आपके Blog Website को और अधिक आकर्षित बनाएगा।
अन्य किसी भी समस्या के लिए आप वीडियो देख सकते हैं।
How to add news ticker in any blogger theme
Custom news ticker for blogger 2021 आपकी Webite Blogger में ho या Wordpress में। आपको जो code दे रहे हैं ,वो न दोनों में ही work करेगा। इन दोनों में ज्यादा अंतर नहीं है। केवल WordPress में ही आपको ACO करने के लिए बहुत सारे प्लगइन्स मिलते हैं। और ब्लॉगर में आपको कोडिंग के द्वारा अपने हाथों से SEO करना होता है।
लेकिन Breaking News Ticker एक ऐसी चीज है। जिसे अगर आप अपनी Wordpress Website या Blogger Website में लगाते हैं। तो आपकी Website की खूबसूरती और बढ़ जाती है। साथ ही, Breaking News Thumbline भी आपकी Website के News Ticker को और अधिक आकर्षित बनाता है।
How to add breaking news ticker in blogger template
सबसे पहले आपको ब्लॉगर के layout Section मे जना है। अब आपको जहां भी Breaking news ticker लगाना है वहाँ Add a Gadget पर click करना है।
अब आपको html Java Script का Gadget लेना है और दिए गए code को Add कर देना है।
CSS - Breaking news ticker Blogger
<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>
Java Script - Breaking news ticker Blogger
<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.newshank.com//feeds/posts/summary?alt=json&callback=softwebtutsTicker'></script>
▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬
How to Create CSS Fade in Effect on Page Load
Fade in Effect on Page Load को Add करने के लिए Blogger के Theme में जाकर Edit Html पर Click करना है। वहाँ आपको body { search करना है। उसके बाद दिए गए code को Style में Add कर दें।
animation:fade1n 3s;
उसके बाद body } के बाद नीचे दिए गए code को Add करके save कर दें।
@keyframes fade1n{from{opacity:0}to{opacity:1}}
किसी भी समस्या के लिए वीडियो देखें।
