Home
TICKER

Breaking News Auto Scrolling New Ticker

Breaking News Auto Scrolling New Ticker

ဒါက​တော့မိမိ Blog site မှာ​နောက်ဆုံးတင်ထားသမျှ posts ကိုတခုချင်းစီ side up ပုံစံနဲ့​ဖော်ပြ​ပေးမယ့်ဒီဇိုင်း​လေးဖြစ်ပါတယ်။Breaking News Ticker ဆိုတာက Original Template မှာပဲပါတာပါ။သီးသန့်တင်​ပေးတဲ့ site ကရှားပါတယ်။​အောက်မှာပုံစံဒီဇိုင်းပုံပြထားပါတယ်ကြိုက်နှစ်သက်တယ်ဆိုရင်​အောက်မှာပြထားတဲ့အဆင့်​တွေအတိုင်းလိုက်လုပ်​ပေးပါ။တကယ်လို့တဆင့်တည်းနဲ့အသုံးပြုချင်တယ်ဆိုရင်​တော့ဟို​အောက်ဆုံးမှာပြထားတဲ့အတိုင်းလုပ်လိုက်ရုံပါပဲ။မိမိအဆင်​ပြေမဲ့နည်းလမ်းကို​ရွေးချယ်အသုံးပြု​ပေးပါ။



DEMO နမူနာအ​နေနဲ့ကြည့်ချင်ရင်​အောက်က DEMO ဆိုတာ​လေးကိုနှိပ်၍နမူနာကြည့်လို့ရပါတယ်။ကြည့်လို့ကြိုက်နှစ်သက်တယ်ဆိုရင်​အောက်ကနည်းလမ်း (2) ခုထဲကမှမိမိအဆင်​ပြေမဲ့နည်းလမ်းနဲ့အသုံးပြုနိုင်ပါတယ်။

Demo

Original --->နည်းလမ်း
  1. မိမိ blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်ပါ
  3. Edit HTML ကိုနှိပ်ပါ

  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;}}

  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"/>

  6. အပေါ်ကအဆင့်တွေအားလုံးလုပ်ဆောင်ပြီးသွားပြီဆိုရင် </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>
  7. အားလုံးပြီးရင် save Template ကိုနှိပ်ပါ

နောက်တဆင့်အ‌နေနဲ့အောက်ကပြထားတဲ့အတိုင်းဆက်လက်လုပ်ဆောင်ပေးပါ
  1. မူလ dashboard သို့ပြန်သွားပါ
  2. dashboard ထဲက Layout ကိုနှိပ်
  3. Add a Gadget ကိုနှိပ်
  4. HTML / JavaScript ကိုနှိပ်

  5. မိမိကြိုက်နှစ်သက်တဲ့ Design ကို‌‌ထည့်ပါ

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

အလွယ်တကူအသုံးပြုနိုင်ရန်ပြုလုပ်ထားသောနည်းလမ်း
  1. မိမိ blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်ပါ
  3. Add a Gadget ကိုနှိပ်ပါ
  4. HTML/JavaScript ကိုနှိပ်ပါ
  5. ပေါ်လာတဲ့ box အကွက်ထဲမှာအောက်မှာပေးထားတဲ့ code  (2) ခုထဲကမှ code (1)ခုရွေးချယ်၍အဲဒီ box အကွက်ထဲမှာထည့်ပေးပါ။
  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>

Post a Comment