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 ----> နည်းလမ်း
NO(1)။မိမိ Blog Site ကို account အရင်ဝင်ပါ
NO(2)။dashboard ထဲကTheme ကိုနှိပ်
No(3) Customize ဘေးက 🔻ကိုနှိပ်
NO(4)။ Edit HTML ကိုနှိပ်
NO(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;}}
NO(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>
NO(7)။ <body> နှင့် </body> ကြားမှာမိမိပေါ်စေချင်တဲ့နေရာမှာအောက်က code တွေကို <body> နှင့် </body> ကြားမှာထည့်ပေးပါ
<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>
NO(8)။ </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>
NO(9)။ save template ကိုနှိပ်ပြီးပါပြီ။
* အလွယ်ကူဆုံးပြုလုပ်ထားသောနည်လမ်း *
NO(1) မိမိ blog site ကို account အရင်ဝင်ပါ
NO(2) dashboard ထဲက Layout ကိုနှိပ်
NO(3) Add a Gadget ကိုနှိပ်
NO(5) ပေါ်လာတဲ့ box အကွက်ကြီးထဲမှာအောက်မှာပေးထားတဲ့ Code တွေထည့်ပေးပါ
NO(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>