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 နမူနာအ​နေ​နဲ့ကြည့်ပြီးသွားလို့ကြိုက်နှစ်သက်တယ်ဆိုရင်​အောက်မှာပြုလုပ်ပုံပြုလုပ်နည်းကိုရှင်းပြထားပါတယ်။

NO(1)။မိမိ Blog site ကို account အရင်ဝင်ပါ

No(2)။dashboard ထဲက Layout ကိုနှိပ်

No(3)။ Add a Garget ကိုနှိပ်။ဒီ​နေရာမှာမိမိတို့​ပေါ်​စေချင်တဲ့​နေရာကို​ရွေးချယ်၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။ Template တခုနဲ့တခုနဲ့မတူတဲ့အတွက် News Ticker ​ပေါ်တဲ့ပုံစံခြင်းအနည်းငယ်အ​ပြောင်းအလဲရှိနိုင်ပါသည်။မိမိအသုံးပြု​နေတဲ့ Template ​ပေါ်မူတည်၍ကြိုက်နှစ်သက်တဲ့​နေရာမှာစိတ်ကြိုက်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။မိမိထည့်သွင်းအသုံးပြုမဲ့​နေရာက Add a Gadget ကိုနှိပ်ပြီးသွားပြီရင်​အောက်ကအဆင့်​တွေအတိုင်းဆက်သွားပါ။

No(4)။HTML/JavaScript ကိုနှိပ်

No(5)။​ပေါ်လာတဲ့ Box အကွက်ကြီးထဲမှာ​အောက်က​ပေးထားတဲ့ News Ticker Code ​တွေထည့်​ပေးလိုက်ပါ

No(6)News Ticker Code ​တွေထည့်ပြီးသွားရင် 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="http://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="http://khinmaungwin-mm.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10" type="text/javascript"></script></div></div></div>

0

0

Loading...