Home
TICKER

BREAKING NEW TICKER

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 နဲ့ပဲပြုလုပ်ရမှာပါ။



  1. မိမိ Blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်
  5. </head> ကိုရှာပါ။အဲဒီ</head> တွေ့ပြီဆိုတာနဲ့အောက်ကပေးထားတဲ့ code ကိုအဲဒီ </head> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

  1. ]]></b:skin> ကိုရှာ။တွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ ]]></b:skin> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။အကယ်၍အဲဒီ ]]></b:skinအပေါ်ကမထည့်ချင်ဘူးဆိုရင် ]]></b:skin> အောက်က နေ <style> css...code...here... </style> အဲဒီလိုထည့်မယ်ဆိုလဲရပါတယ်။မိမိနှစ်သက်သလိုထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

 /* .ticker
------------------------------- */
.trend-bg{background-color:#343A40; float:left; width:100%; color:#fff; position:relative; }
.ticker .title{float: left; height: 42px; background-color: $(main.color); font-size: 14px; color: #fff; line-height: 42px; font-weight: 400; overflow: hidden; padding: 0 10px; }
.ticker .title .fa{margin-right:10px;transform:rotate(-30deg);-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);-o-transform:rotate(-30deg)}
.ticker .widget-content{height:40px;box-sizing:border-box;overflow:hidden;padding:0 4px; }
.ticker .widget-content li{float:left;margin-left:30px;display:inline-block;height:38px;line-height:38px;padding:0}
.ticker .widget{margin:0;overflow:hidden}
.tk-thumb{float:left;margin:4px 10px 0 0}
.tk-img{position:relative;display:block;width:35px;height:30px;overflow:hidden}
.ticker .post-tag{display:inline-block;background-color:#0066ff;color:#fff;margin-right:10px;font-weight:400;height:18px;line-height:18px;padding:1px 6px;font-size:11px;text-transform:uppercase;position:relative;margin-top:10px;float:left}
.ticker .recent-title{font-size:14px;font-weight: 400;display:inline-block;line-height:15px}
.ticker .recent-title a{color:#fff; }
.ticker .recent-title a:hover{color: ;}
.tickercontainer,.tickercontainer .mask,ul.newsticker{-webkit-transition:all 0 linear;-moz-transition:all 0 linear;-o-transition:all 0 linear;transition:all 0 linear;list-style:none;margin:0}
.tickercontainer{margin:0;padding:0;overflow:hidden}
.tickercontainer .mask{position:relative;overflow:hidden; margin:2px 0 0; }
.newsticker{position:relative;list-style-type:none;margin:0;padding:0}
ul.newsticker{-webkit-transition:all 0s linear;-moz-transition: all 0s linear;-o-transition:all 0s linear;transition:all 0s linear;position:relative;list-style-type:none;margin:0;padding:0}
.tickeroverlay-left{display:none}
.tickeroverlay-right{display:none}

  1. မိမိပေါ်စေချင်တဲ့ နေရာက </b:section> နဲ့ <b:section> ကြားက‌ နေရာတွင် အောက်က code ကို copy ယူ၍ထည့်ပေးပါ

 <div class='clearboth'/>
<!---[ Ticker ]--->
<div class='trend-bg'>
  <b:section class='ticker' id='ticker' maxwidgets='1' name='Ticker News' showaddelement='no'>
    <b:widget id='HTML43' locked='false' title='Breaking News' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<span data-type="recent" data-no="5"></span>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>
  </b:section>
  </div>  
<div class='clearboth'/>

  1. </body> ကိုရှာပါ။တွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။

 <script type='text/javascript'>
//<![CDATA[
// Main Post Scripts
$(".ticker .HTML .widget-content").each(function() {  var b = $(this).find("span").attr("data-no"), v = $(this).find("span").attr("data-label"), box = $(this).find("span").attr("data-type");  if (box.match('recent')) { $.ajax({url: "/feeds/posts/default?alt=json-in-script&max-results=" + b,type: 'get',dataType: "jsonp",success: function(e) { var u = ""; var h = '<ul>'; for (var i = 0; i < e.feed.entry.length; i++) {  for (var j = 0; j < e.feed.entry[i].link.length; j++) {if (e.feed.entry[i].link[j].rel == "alternate") { u = e.feed.entry[i].link[j].href; break}  }  var g = e.feed.entry[i].title.$t;  var s = e.feed.entry[i].category[0].term;  var c = e.feed.entry[i].content.$t;  var $c = $('<div>').html(c);  if (c.indexOf("//www.youtube.com/embed/") > -1) {var p = e.feed.entry[i].media$thumbnail.url.replace('/default.jpg', '/mqdefault.jpg');var k = p  } else if (c.indexOf("<img") > -1) {var q = $c.find('img:first').attr('src').replace('s72-c', 's1600');var k = q  } else {var k = no_image  }  h += '<li><div class="tk-thumb"><a class="tk-img" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><a href="/search/label/' + s + '" class="post-tag icon ' + s + '">' + s + '</a><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3></li>' } h += '</ul>'; $(".ticker .widget-content").each(function() {  $(this).html(h);  $(this).prev('h2').prepend('<i class="fa fa-rocket"></i>');  $(this).find('ul').webTicker() })} })  } else if (box.match('label')) { $.ajax({url: "/feeds/posts/default/-/" + v + "?alt=json-in-script&max-results=" + b,type: 'get',dataType: "jsonp",success: function(e) { var u = ""; var h = '<ul>'; for (var i = 0; i < e.feed.entry.length; i++) {  for (var j = 0; j < e.feed.entry[i].link.length; j++) {if (e.feed.entry[i].link[j].rel == "alternate") { u = e.feed.entry[i].link[j].href; break}  }  var g = e.feed.entry[i].title.$t;  var s = e.feed.entry[i].category[0].term;  var c = e.feed.entry[i].content.$t;  var $c = $('<div>').html(c);  if (c.indexOf("//www.youtube.com/embed/") > -1) {var p = e.feed.entry[i].media$thumbnail.url.replace('/default.jpg', '/mqdefault.jpg');var k = p  } else if (c.indexOf("<img") > -1) {var q = $c.find('img:first').attr('src').replace('s72-c', 's1600');var k = q  } else {var k = no_image  }  h += '<li><div class="tk-thumb"><a class="tk-img" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><a href="/search/label/' + s + '" class="post-tag icon ' + s + '">' + s + '</a><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3></li>' } h += '</ul>'; $(".ticker .HTML .widget-content").each(function() {  $(this).html(h);  $(this).prev('h2').prepend('<i class="fa fa-thumb-tack"></i>');  $(this).find('ul').webTicker() })} })  } 
});
//]]>
</script>
<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:100,direction:"left",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-left'>&nbsp;</span><span class='tickeroverlay-right'>&nbsp;</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>

  1. save ကိုနှိပ်ပြီးပါပြီ။

Post a Comment