Breaking News Auto Scrolling New Ticker
ဒါကတော့မိမိ Blog site မှာနောက်ဆုံးတင်ထားသမျှ posts ကိုတခုချင်းစီ side up ပုံစံနဲ့ဖော်ပြပေးမယ့်ဒီဇိုင်းလေးဖြစ်ပါတယ်။Breaking News Ticker ဆိုတာက Original Template မှာပဲပါတာပါ။သီးသန့်တင်ပေးတဲ့ site ကရှားပါတယ်။အောက်မှာပုံစံဒီဇိုင်းပုံပြထားပါတယ်ကြိုက်နှစ်သက်တယ်ဆိုရင်အောက်မှာပြထားတဲ့အဆင့်တွေအတိုင်းလိုက်လုပ်ပေးပါ။တကယ်လို့တဆင့်တည်းနဲ့အသုံးပြုချင်တယ်ဆိုရင်တော့ဟိုအောက်ဆုံးမှာပြထားတဲ့အတိုင်းလုပ်လိုက်ရုံပါပဲ။မိမိအဆင်ပြေမဲ့နည်းလမ်းကိုရွေးချယ်အသုံးပြုပေးပါ။
DEMO နမူနာအနေနဲ့ကြည့်ချင်ရင်အောက်က DEMO ဆိုတာလေးကိုနှိပ်၍နမူနာကြည့်လို့ရပါတယ်။ကြည့်လို့ကြိုက်နှစ်သက်တယ်ဆိုရင်အောက်ကနည်းလမ်း (2) ခုထဲကမှမိမိအဆင်ပြေမဲ့နည်းလမ်းနဲ့အသုံးပြုနိုင်ပါတယ်။
Original --->နည်းလမ်း
NO(1)။မိမိ blog site ကို account အရင်ဝင်ပါ
NO(2)။ dashboard ထဲက Theme ကိုနှိပ်ပါ
NO(3)။ Edit HTML ကိုနှိပ်ပါ
NO(4)။ ညာဘက်ထောင့်ကအကွက်လေးထဲမှာ ]]></b:skin> လို့ရေး၍ Ctrl + F အကူအညီယူ၍အဲဒီ ]]></b:skin> ကိုရှာပါ။အဲဒီ ]]></b:skin> ကိုတွေ့ပြီဆိုရင်အောက်ကပေးထားတဲ့ Design (2) ခုထဲကမှမိမိနှစ်သက်တဲ့ Design ရဲ့ code တွေကိုအဲဒီ ]]></b:skin> အပေါ်ကနေထည့်ပေးပါ။
Design (1)
#breakingnews {
margin-right:15px;
height:30px;
line-height:30px;
overflow:hidden;
width:100%;
float:left;}
#adbreakingnews li a {
font-family:inherit;
font-size:25px;
font-weight:700;
color:#666;
transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {
float:left;
margin-left:60px;}
#adbreakingnews ul,#adbreakingnews li{
list-style:none;
margin:0;
padding:0}
#breakingnews .breakhead {
position:absolute;
display:block;
float:left;
font-size:11px;
font-weight:700;
text-transform:uppercase;
padding: 2px 6px;}
Design (2)
#breakingnews {
margin:15px 0 0 100px;
margin-right:100px;
height:30px;
line-height:20px;
overflow:hidden;
background:#fff;
border:1px solid #e6e6e6;}
#breakingnews .breakhead {
position:absolute;
background:none repeat scroll 0 0 #363b40;
color:#fff;
display:block;
float:left;
font-family:inherit;
font-size:12px;
font-weight:700;
text-transform:uppercase;
padding:6.5px 22px;}
#adbreakingnews li a {
font-weight: bold;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-size:20px;font-weight:700;
color:#666;
margin-top:10px;
transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {
color:#359bed;}
#adbreakingnews {
float:left;
margin-left:75px;
margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{
list-style:none;
margin:0;
padding:0}
@media only screen and (max-width:640px)
{#breakingnews {
margin:20px 0 0 15px;
margin-right:15px;}
#breakingnews .breakhead {
padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}
NO(5)။ </head> ကိုရှာပါ။တွေ့ပြီဆိုရင်အောက်မှာပေးထားတဲ့ 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> နှင့် </body> ကြားကမိမိပေါ်စေချင်တဲ့နေရာမှာအောက်ကပေးထားတဲ့ code တွေကိုအဲဒီ <body> နှင့် </body> ကြားမှာထည့်ပေးပါ။
Design(1)
<span class='breakhead'><i class='fa fa-refresh fa-spin'> Latest</i></span> <div id='adbreakingnews'>Loading...</div>
Design(2)
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'></i></span>
<div id='adbreakingnews'>Loading...</div></div>
NO(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(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews 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>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
NO(8)။အားလုံးပြီးရင် save Template ကိုနှိပ်ပါ။ပြီးပါပြီ။
<-------- ။ ---------- ။ ---------- ။ ----------- ။ -------->
အလွယ်တကူအသုံးပြုနိုင်ရန်ပြုလုပ်ထားသောနည်းလမ်း
No(1)မိမိ blog site ကို account အရင်ဝင်ပါ
No(2)dashboard ထဲက Layout ကိုနှိပ်ပါ
No(3)Add a Gadget ကိုနှိပ်ပါ
No(4)HTML/JavaScript ကိုနှိပ်ပါ
No(5)ပေါ်လာတဲ့ box အကွက်ထဲမှာအောက်မှာပေးထားတဲ့ code (2) ခုထဲကမှ code (1)ခုရွေးချယ်၍အဲဒီ box အကွက်ထဲမှာထည့်ပေးပါ။
No(6)code တွေထည့်ပြီးသွားရင် save ကိုနှိပ်ပါ။ပြီးပါပြီ
ပြုလုပ်ထားသော style (1)
<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 type="text/css">
#breakingnews {
margin-right:15px;
height:30px;
line-height:30px;
overflow:hidden;
width:100%;
float:left;}
#adbreakingnews li a {
font-family:inherit;
font-size:25px;
font-weight:700;
color:#666;
transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {
float:left;
margin-left:60px;}
#adbreakingnews ul,#adbreakingnews li{
list-style:none;
margin:0;
padding:0}
#breakingnews .breakhead {
position:absolute;
display:block;
float:left;
font-size:11px;
font-weight:700;
text-transform:uppercase;
padding: 2px 6px;}
</style>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'> Latest</i></span>
<div id='adbreakingnews'>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(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews 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>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
ပြုလုပ်ထားသော style (2)
<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 type="text/css">
#breakingnews {
margin:15px 0 0 100px;
margin-right:100px;
height:30px;
line-height:20px;
overflow:hidden;
background:#fff;
border:1px solid #e6e6e6;}
#breakingnews .breakhead {
position:absolute;
background:none repeat scroll 0 0 #363b40;
color:#fff;
display:block;
float:left;
font-family:inherit;
font-size:12px;
font-weight:700;
text-transform:uppercase;
padding:6.5px 22px;}
#adbreakingnews li a {
font-weight: bold;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-size:20px;font-weight:700;
color:#666;
margin-top:10px;
transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {
color:#359bed;}
#adbreakingnews {
float:left;
margin-left:75px;
margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{
list-style:none;
margin:0;
padding:0}
@media only screen and (max-width:640px)
{#breakingnews {
margin:20px 0 0 15px;
margin-right:15px;}
#breakingnews .breakhead {
padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}
</style>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'></i></span>
<div id='adbreakingnews'>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(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews 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>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>