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>အပေါ်ကနေထည့်ပေးပါ

No(6) </body> ကိုရှာတွေ့ပြီဆိုရင် အောက်က ပေးထားတဲ့ Ticker code ကိုအဲဒီ </body> အပေါ်ကနေထည့်ပေးပါ

@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>

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 ကိုနှိပ်ပြီးပါပြီ။

အ‌ပေါ်ကအတိုင်းမထည့်ချင်ဘူးဆိုရင်ဒီနည်းလမ်းကိုအသုံးပြု၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

No(1) dashboard ထဲက Layout ကိုနှိပ်

No(2) Add a Graget ကိုနှိပ်

No(3) HTML/JavaScript ကိုနှိပ်

No(4) အောက်က code တွေထည့်ပြီးပါပြီ

@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 တွေထည့်ပြီးပါပြီ

Ticker Style(2) ကိုအသုံးပြုမယ်ဆိုရင် khinmaungwin-mm.blogspot.com ဆိုတဲ့နေရာမှာမိမိရဲ့ blog လိပ်စာထည့်ပေးပါ။ကိုယ်ပိုင် Domain ရှိတဲ့သူကတော့မိမိ Domain ထည့်ပေးပါ။ save ကိုနှိပ်ဒါဆိုအားလုံးပြီးသွားပါပြီ။

Khin Maung Win

Breaking New Recent Posts Scrolling Ticker

Post a Comment

Sitemap xml

Vhjjj

URL Shortener

Random Password Generator

RSS Feeds

Select Country

Select Chatbox

Like this page?

Visitor Views

Visitor Informations

Subscribe

Feedback

Contact Us

Breaking New Recent Posts Scrolling Ticker

Post a Comment

Subscribe to Our Newsletter

RSS Feeds

Select Country

Select Chatbox

Like this page?

Visitor Views

Visitor Informations

Subscribe

Feedback

Contact Us