Home
TICKER

BREAKING NEWS AUTOMATIC NEWS TICKER

Breaking News Automatic News Ticker

ဒါက​တော့မိမိတို့ Blog Site မှာတင်ထားပြီးသား​ Post များကို side up နဲ့​ဖော်ပြ​ပေးမဲ့ Design ​လေးဖြစ်ပါတယ်။ကြိုက်နှစ်သက်လိမ့်မယ်လို့​တော့ထင်တယ်။ဒီ Breaking News Ticker ​တွေဟာ​ဆိုရင် Template ​တွေမှာတခါတည်းပါမလာတာကများပါတယ်။တကူးတကပြန်တင်​ပေးမဲ့ site ဆိုတာမရှိသ​လောက်ပါပဲ။ဒီ Breaking News Ticker ကိုမည်သည့် Template အမျိုးအစားတွင်မဆိုထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။Breaking News Ticker ကိုနမူနာအ​နေနဲ့ကြည့်ချင်တယ်ဆိုရင်​အောက်မှာ DEMO Link ​ပေးထားပါတယ်။ DEMO ဆိုတာ​လေးကိုနှိပ်၍နမူနာကြည့်လို့ရပါတယ်။​အောက်မှာပြုလုပ်နည်း(2) နည်းပြထားပါတယ်။ပထမတနည်းက​တော့ News Ticker ​တွေထည့်​နေကျလမ်း​ကြောင်းအတိုင်းအဆင့်လိုက်ထည့်သွင်း​ပေးရမှာဖြစ်ပါတယ်။ဒုတိယတနည်းက​တော့အလွယ်တကူအသုံးပြုလို့ရ​အောင်လမ်း​ကြောင်းအတိုင်းမထည့်ပဲနဲ့ HTML /JavaScript တို့နဲ့အပြင်က​နေတိုက်ရိုက်ထည့်သွင်းတဲ့နည်းလမ်းဖြစ်ပါတယ်။မိမိအဆင်​ပြေမဲ့နည်းလမ်းကို​​ရွှေးချယ်အသုံးပြုပါ။ကဲစလိုက်ကြရ​အောင်



Origranl ----> နည်းလမ်း
  1. မိမိ Blog Site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲကTheme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်

  5. Ctrl + F အကူအညီဖြင့် ]]></b:skin> (or) </style> ကိုရှာပါ။အဲဒီ ]]></b:skin> (or) </style> ကို​​တွေ့ပြီဆိုရင်​အောက်မှာ​ပေးထားတဲ့ code ကိုအဲဒီ ]]></b:skin> (or) </style> ​အ​ပေါ်က​နေကပ်လျက်ထည့်​ပေးလိုက်ပါ။

     #bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

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

    <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/> 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

  7. </body> ထပ်ရှာပါ။အဲဒီ </body> အောက်ကပေးထားတဲ့ JS Code တွေကို </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ

     <script type='text/javascript'>
 //<![CDATA[ //www.khinmaungwin.xyz Breaking News Ticker Style 
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})}); //]]> </script>
  8. save template ကိုနှိပ်
နောက်တဆင့်အနေနဲ့အောက်ကပြထားတဲ့အတိုင်းဆက်လက်လုပ်ဆောင်ပေးပါ
  1. မိမိ blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်
  3. Add a Gadget ကိုနှိပ်
  4. HTML / JavaScript ကိုနှိပ်

  5. အောက်က code ကိုထည့်ပေးပါ

     <b:if cond='data:blog.pageType == "index"'> 
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span> <div id='breaking-bsd-news'>Loading..</div>
</div> 
</b:if>
  6. save ကိုနှိပ်ပြီးပါပြီ။
<------ ။ ------- ။ ------- ။ ------- ။ ------>

အလွယ်ကူဆုံးပြုလုပ်ထားသောနည်လမ်း
  1. မိမိ blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်
  3. Add a Gadget ကိုနှိပ်
  4. HTML / JavaScript ကိုနှိပ်
  5. ပေါ်လာတဲ့ box အကွက်ကြီးထဲမှာအောက်မှာပေးထားတဲ့ Code တွေထည့်ပေးပါ
  6. save ကိုနှိပ်ပြီးပါပြီ။

 <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/> 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<style type="text/css">
#bd-breakingnews {
       margin:15px 0 0 0;
       margin-right:15px;
       height:40px;
       line-height:29px;
       overflow:hidden;
       background:#fff;
       border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {
       position:absolute;
       background:none repeat scroll 0 0 #8ED557;
       color:#fff;
       display:block;
       float:left;
       font-family:inherit;
       font-size:16px;
       font-weight:420;
       text-transform:uppercase;
       padding:6.5px 22px;}
#breaking-bsd-news li a {
      font-family:inherit;
      font-size:20px;
      font-weight:420;
      color:#666;
      margin-top:10px;
      transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {
      color:#63953D;}
#breaking-bsd-news {
      float:left;
      margin-left:75px;
      margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{
       list-style:none;
       margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {
       margin:20px 0 0 0;
       margin-right:0;}
#bd-breakingnews .head-breaking {
       padding:6.5px 14px;}
#breaking-bsd-news {
       margin-left:50px;}}
</style>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'></i></span>
<div id='breaking-bsd-news'>Loading..</div></div>
<script type='text/javascript'>
//<![CDATA[
//www.khinmaungwin.xyz Breaking News Ticker Style
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]></script>

Post a Comment