Breaking New Recent Posts Scrolling Ticker
ဒါကတော့မိမိရဲ့ Blog site မှာနောက်ဆုံးတင်ထားတဲ့ Posts များကိုစာတန်းလေးနဲ့ဖော်ပြပေးမဲ့ဒီဇိုင်းလေးပါ။မိတ်ဆွေတို့အခုလက်ရှိသုံးနေတဲ့ Template မှာ News Ticker နဂိုပါလာတဲ့ Template ရှိသလို News Ticker နဂိုမပါလာတဲ့ Template လဲရှိပါတယ်။မိတ်ဆွေတို့အခုလက်ရှိအသုံးပြုနေတဲ့ Template မှာ News Ticker နဂိုပါမလာဘူး Template လဲပြောင်းမသုံးချင်ဘူး အခုလက်ရှိအသုံးပြုနေတဲ့ Template ပဲဆက်သုံးမယ်ဆိုတဲ့မိတ်ဆွေတွေအတွက် Template လဲပြောင်းသုံးစရာမလိုပဲ News Ticker ကိုထည့်သွင်းအသုံးပြုနိုင်မှာပါ။News Ticker နဂိုမပါလာတဲ့ Template ပိုင်ရှင်တွေဆိုရင်ဒီ News Ticker ကိုကြည့်ပြီးသဘောကျသွားလိမ့်မယ်လို့ထင်ပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲ HTML/JavaScript နဲ့ပဲပြုလုပ်ရမှာပါ။
Recent Posts Scrolling News Ticker ကို Demo အနေနဲ့ကြည့်ချင်တယ်ဆိုရင်အောက်မှာ Demo link ပေးထားပါတယ်။ကြိုက်နှစ်သက်လို့အသုံးပြုချင်တယ်ဆိုရင်အောက်မှာ Code ပေးထားပါတယ်။
Ticker Style (1)
NO(1)။မိမိ Blog site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Theme ကိုနှိပ်
No(3) Customize ဘေးက 🔻ကိုနှိပ်
No(4) Edit HTML ကိုနှိပ်
No(5) Template တစ်ခုနှင့်တစ်ခုမတူသည့်အတွက်အောက်က code ကိုမထည့်ပဲချန်ထားခဲ့နိုင်သည်။ လိုအပ်ပါက အောက်က code ကို </head>အပေါ်ကနေထည့်ပေးပါ
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
No(6) </body> ကိုရှာတွေ့ပြီဆိုရင် အောက်က ပေးထားတဲ့ Ticker code ကိုအဲဒီ </body> အပေါ်ကနေထည့်ပေးပါ
<style>
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #3cc091}
.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 {overflow: hidden;}
.ticker .title {float: right;width: 150px;height: 40px;line-height: 40px;text-align: center;color: #FFFFFF;background: #2c97de;margin: 7px 6px 7px 0px;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font-family: 'Roboto', sans-serif;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {float: right;line-height: 40px;font-size: 13px;font-weight: 700;font-family: 'Roboto', sans-serif;}
.ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
#ticker{height:45px;direction:rtl;overflow:hidden;background:#fefefe;text-align:right}
#ticker ul{direction:rtl;padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;direction:rtl;white-space:nowrap}
#ticker ul li img{float:right;direction:rtl;width:35px;height:35px;margin:5px 5px 5px 7px}
#ticker ul li h3{margin:0;direction:rtl;font:700 12px 'droid arabic kufi',sans-serif}
#ticker ul li h3 a{color:#333;direction:rtl;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:700 12px 'droid arabic kufi',sans-serif;line-height:20px!important;direction:rtl;color:#999}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {font-size: 12px;float: right;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;height: 40px;font-size:12px;font-weight:400;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {margin-right: 20px;width: 96.3%;overflow: hidden;background: #363b3f;-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.PageList .selectnav {margin-top: 8px;}
.newsticker { color: #fff; position: relative; right: 5px; }
@media screen and (max-width:1066px) {
.ticker .tickercontainer {width: 80%;}}
@media screen and (max-width:960px) {
.ticker .tickercontainer {width: 75%;}}
@media only screen and (max-width:768px){
.ticker .tickercontainer {width: 68%;}}
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
</style>
<script type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"right",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-right'> </span><span class='tickeroverlay-left'> </span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
$(".ticker .newsticker").each(function () {
var e = $(this).text();
if (e.match("recent")) {
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=6",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .newsticker").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
} else {
$.ajax({
url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .newsticker").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
}
});
//]]>
</script>
No(7) save ကိုနှိပ်
No(8) Dashboard ထဲက Layout ကိုနှိပ်
No(9)။ Add a Garget ကိုနှိပ်။ဒီနေရာမှာမိမိတို့ပေါ်စေချင်တဲ့နေရာကိုရွေးချယ်၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။ Template တခုနဲ့တခုနဲ့မတူတဲ့အတွက် News Ticker ပေါ်တဲ့ပုံစံခြင်းအနည်းငယ်အပြောင်းအလဲရှိနိုင်ပါသည်။မိမိအသုံးပြုနေတဲ့ Template ပေါ်မူတည်၍ကြိုက်နှစ်သက်တဲ့နေရာမှာစိတ်ကြိုက်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။မိမိထည့်သွင်းအသုံးပြုမဲ့နေရာက Add a Gadget ကိုနှိပ်ပြီးသွားပြီရင်အောက်ကအဆင့်တွေအတိုင်းဆက်သွားပါ။
No(10)။HTML/JavaScript ကိုနှိပ်
No(11)။ပေါ်လာတဲ့ Box အကွက်ကြီးထဲမှာအောက်ကပေးထားတဲ့ HTML Code တွေထည့်ပေးလိုက်ပါ။Save ကိုနှိပ်ပြီးပါပြီ။
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='ticker ticker-section' id='ticker'>
<div>
<div>
<div class='content-wrap container-wrapper '>
<div class='title second-color-bg '>
<div class='ticker-icon'> <i class='fa fa-fire'> </i></div>
<h6>Breaking News</h6>
</div>
<div class='newsticker'>
recent
</div>
</div>
</div>
</div>
</div>
</b:if></b:if>
အပေါ်ကအတိုင်းမထည့်ချင်ဘူးဆိုရင်ဒီနည်းလမ်းကိုအသုံးပြု၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။
No(1) dashboard ထဲက Layout ကိုနှိပ်
No(2) Add a Graget ကိုနှိပ်
No(3) HTML/JavaScript ကိုနှိပ်
No(4) အောက်က code တွေထည့်ပြီးပါပြီ
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #3cc091}
.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 {overflow: hidden;}
.ticker .title {float: right;width: 150px;height: 40px;line-height: 40px;text-align: center;color: #FFFFFF;background: #2c97de;margin: 7px 6px 7px 0px;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font-family: 'Roboto', sans-serif;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {float: right;line-height: 40px;font-size: 13px;font-weight: 700;font-family: 'Roboto', sans-serif;}
.ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
#ticker{height:45px;direction:rtl;overflow:hidden;background:#fefefe;text-align:right}
#ticker ul{direction:rtl;padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;direction:rtl;white-space:nowrap}
#ticker ul li img{float:right;direction:rtl;width:35px;height:35px;margin:5px 5px 5px 7px}
#ticker ul li h3{margin:0;direction:rtl;font:700 12px 'droid arabic kufi',sans-serif}
#ticker ul li h3 a{color:#333;direction:rtl;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:700 12px 'droid arabic kufi',sans-serif;line-height:20px!important;direction:rtl;color:#999}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {font-size: 12px;float: right;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;height: 40px;font-size:12px;font-weight:400;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {margin-right: 20px;width: 96.3%;overflow: hidden;background: #363b3f;-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.PageList .selectnav {margin-top: 8px;}
.newsticker { color: #fff; position: relative; right: 5px; }
@media screen and (max-width:1066px) {
.ticker .tickercontainer {width: 80%;}}
@media screen and (max-width:960px) {
.ticker .tickercontainer {width: 75%;}}
@media only screen and (max-width:768px){
.ticker .tickercontainer {width: 68%;}}
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
</style>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='ticker ticker-section' id='ticker'>
<div>
<div>
<div class='content-wrap container-wrapper '>
<div class='title second-color-bg '>
<div class='ticker-icon'> <i class='fa fa-fire'> </i></div>
<h6>Breaking News</h6>
</div>
<div class='newsticker'>
recent
</div>
</div>
</div>
</div>
</div>
</b:if></b:if>
<script type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"right",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-right'> </span><span class='tickeroverlay-left'> </span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
$(".ticker .newsticker").each(function () {
var e = $(this).text();
if (e.match("recent")) {
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=6",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .newsticker").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
} else {
$.ajax({
url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .newsticker").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
}
});
//]]>
</script>
Ticker Style (2)
No(1) dashboard ထဲက Layout ကိုနှိပ်
No(2) Add a Graget ကိုနှိပ်
No(3) HTML/JavaScript ကိုနှိပ်
No(4) အောက်က code တွေထည့်ပြီးပါပြီ
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="bntool" id='bnby7amian'>
<div class="bntitle" id="tito7">Recent News</div>
<div class="bnloop" id="bnmove"></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;800&display=swap');
body{
margin: 0;
padding: 5px;
font-family: 'Tajawal',sans-serif;
font-size: 15px;
}
.bntool{background-color:#f1f1f1;width:100%;height:40px;text-align:right;direction:rtl;display:flex;flex-direction:row;position:relative;overflow:hidden;border-left:solid 2px #0000aa;box-shadow:0 0 1px #333;border-radius:3px;margin:10px 0}
.bntitle{display:inline-block;font-size:18px;line-height:40px;padding:0 10px;background-color:#001122;color:#fff;border-left:solid 3px #0000aa;z-index:1;border-radius:3px 0 0 3px}
.bntitle::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' class='bi bi-layout-text-window-reverse' viewBox='0 0 16 16'%3E%3Cpath d='M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z'/%3E%3Cpath d='M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z'/%3E%3C/svg%3E");margin-left:8px;width:20px;height:20px;vertical-align:middle;fill:#fff}
.bnloop{display:none;flex-direction:row;position:absolute;z-index:0}
.bnone{display:flex;flex-shrink:0;font-size:inherit;line-height:40px;margin:0 10px}
.bnone a{color:#000;text-decoration:none}
.bnone a::before{content:"";display:inline-block;background:url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='file-alt' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;margin-left:5px;width:13px;height:13px;color:#fff;vertical-align:middle}
.bnone a:hover{color:#0000dd;transition:300ms}
</style>
<script>
function Article_loop() {
NumOfArt = $(".bnone").length, WidthOfCon = $("#bnby7amian").width(), WidthOfTito = $("#tito7").width(), Widthsource = WidthOfCon, goku = 0 - WidthOfTito;
for (let t = 0; t < NumOfArt; t++) goku = 20 + goku + $(".bnone").eq(t).width();
$("#bnmove").css("margin-right", WidthOfCon + "px"), setInterval(function() {
1 == hamian && ($("#bnmove").css("margin-right", WidthOfCon + "px"), WidthOfCon < -1 * goku && (WidthOfCon = Widthsource), WidthOfCon -= 1)
}, 15)
}
NumOfPost = 10, hamian = !0, $("#bnmove").mouseover(function() {
hamian = !1
}).mouseout(function() {
hamian = !0
}), $.ajax({
type: "get",
url: "https://khinmaungwin-mm.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=" + NumOfPost,
data: "data",
dataType: "jsonp",
success: function(t) {
NumOfEntry = t.feed.openSearch$itemsPerPage.$t, OrderOfLinks = t.feed.entry[0].link.length - 1;
for (let n = 0; n < NumOfEntry; n++) $("#bnmove").append('<div class="bnone"><a href="' + t.feed.entry[n].link[OrderOfLinks].href + '">' + t.feed.entry[n].link[OrderOfLinks].title + "</a><div>"), n == NumOfEntry - 1 && ($("#bnmove").css("display", "flex"), Article_loop())
}
});
</script>
Ticker Style(2) ကိုအသုံးပြုမယ်ဆိုရင် https://khinmaungwin-mm.blogspot.com ဆိုတဲ့နေရာမှာမိမိရဲ့ blog လိပ်စာထည့်ပေးပါ။ကိုယ်ပိုင် Domain ရှိတဲ့သူကတော့မိမိ Domain ထည့်ပေးပါ။ save ကိုနှိပ်ဒါဆိုအားလုံးပြီးသွားပါပြီ။