Home
TICKER

RECENT POST SCROLLER NEWS TICKER

Recent Posts Scroller News 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 Scroller News Ticker ကို Demo အနေနဲ့ကြည့်ချင်တယ်ဆိုရင်​အောက်မှာ Demo link ပေးထားပါတယ်။ကြိုက်နှစ်သက်လို့အသုံးပြုချင်တယ်ဆိုရင်​အောက်မှာ Code ​ပေးထားပါတယ်။



ဒီဇိုင်းပုံစံကို Demo နမူနာအ​နေနဲ့ကြည့်ချင်တယ်ဆိုရင်​အောက်က Demo Link ​ပေးထားတဲ့ Demo ဆိုတာ​လေးကိုနှိပ်၍သွား​ရောက်ကြည့်ရှုနိုင်ပါတယ်။အခုပြထားတဲ့ News Ticker ကို​တွေရပါလိမ့်မယ်


Demo

 Demo နမူနာအ​နေ​နဲ့ကြည့်ပြီးသွားလို့ကြိုက်နှစ်သက်တယ်ဆိုရင်​အောက်မှာပြုလုပ်ပုံပြုလုပ်နည်းကိုရှင်းပြထားပါတယ်။

  1. မိမိ Blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်
  3. Add a Garget ကိုနှိပ်။ဒီ​နေရာမှာမိမိတို့​ပေါ်​စေချင်တဲ့​နေရာကို​ရွေးချယ်၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။ Template တခုနဲ့တခုနဲ့မတူတဲ့အတွက် News Ticker ​ပေါ်တဲ့ပုံစံခြင်းအနည်းငယ်အ​ပြောင်းအလဲရှိနိုင်ပါသည်။မိမိအသုံးပြု​နေတဲ့ Template ​ပေါ်မူတည်၍ကြိုက်နှစ်သက်တဲ့​နေရာမှာစိတ်ကြိုက်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။မိမိထည့်သွင်းအသုံးပြုမဲ့​နေရာက Add a Gadget ကိုနှိပ်ပြီးသွားပြီရင်​အောက်ကအဆင့်​တွေအတိုင်းဆက်သွားပါ။
  4. HTML/JavaScript ကိုနှိပ်
  5. ပေါ်လာတဲ့ Box အကွက်ကြီးထဲမှာ​အောက်က​ပေးထားတဲ့ News Ticker Code ​တွေထည့်​ပေးလိုက်ပါ
  6. News Ticker Code ​တွေထည့်ပြီးသွားရင် https://khinmaungwin-mm.blogspot.com ဆိုတဲ့​နေရာမှာမိမိရဲ့ blog လိပ်စာထည့်​ပေးပါ။ကိုယ်ပိုင် Domain ရှိတဲ့သူက​တော့မိမိ Domain ထည့်​ပေးပါ။var nMax Posts=10 ဆိုတဲ့​နေရာမှာမိမိ​ပေါ်​စေချင်တဲ့အ​ရေအတွက်အတိုင်း​ပြောင်းလဲ​ရေးသားနိုင်ပါတယ်။မိမိရဲ့ Blog လိပ်စာလဲထည့်ပြီးသွားပြီ​ပေါ်​စေချင်တဲ့အ​ရေအတွက်လဲ​ပြောင်းပြီးသွားပြီဆိုရင်​တော့ save ကိုနှိပ်ဒါဆိုအားလုံးပြီးသွားပါပြီ။

News Ticker Style (1)


<span>
<div class="lalulintas"><span class="rambuhijau">
<script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = "✿"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;

try {

sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = "  ";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"

sHeadLines = "";

for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];

if (nFeedCounter == json.feed.entry.length) break;

for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}

if (sDirection == "left") {
sHeadLines = sHeadLines + "  " + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + "  " + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}</script>
<script src="https://khinmaungwin-mm.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10" type="text/javascript"></script></span></div>
</span>

<style type="text/css">
.lalulintas{width:100%;height:50px;background:#05ca98;margin:0 auto;position:relative;}
.rambuhijau{background:#fff;position:absolute;display:block;color:rgba(0,0,0,0.2);text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:150%;padding:10px;margin:5px;left:50px;right:0;top:2px;bottom:0;font-weight:700;line-height:17px}
@media only screen and (max-width: 768px) {
.rambuhijau {font-size:100%;}
}
</style>

News Ticker Style (2)


<style type="text/css">
#recent-newsticker{
       margin:20px 0;
       position:relative}
#recent_post{
        position:relative;
        border:1px solid #2196F3;
        z-index:9;
        overflow:hidden;
         padding:2px;
         background:#fff;
         width:100%!important;
          border-radius:6px;}
#recent_post a{
           margin:0 15px;
           line-height:2}
.newstitle{
           float:left;
           background:#2196F3;
           color:#fff;
           padding:7px 10px;
           font-weight:600%;
            border-radius:6px;
            text-transform:uppercase}
#recent_post .wrapper{
             width:1120px;
              max-width:100%;
              text-align: none;
              margin:0 auto;
              border-radius:6px;}
@media screen and (max-width:648px){
.newstitle{
              font-size:37px;
              padding:3px 9px!important}#recent_post{
              top:60px!important;
              padding:0!important}#recent_post marquee{
              width:100%!important;
              line-height:1}}
</style>
<div id='recent-newsticker'>
 <div id='recent_post' title='Breaking News'>
      <div class="wrapper">
    <div class="newstitle">Breaking News</div>
     
<script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = "✿"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;

try {

sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = "  ";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"

sHeadLines = "";

for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];

if (nFeedCounter == json.feed.entry.length) break;

for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}

if (sDirection == "left") {
sHeadLines = sHeadLines + "  " + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + "  " + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}</script>
<script src="https://khinmaungwin-mm.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10" type="text/javascript"></script></div></div></div>

Post a Comment