Friday, November 22, 2013

Simple Recent Posts Widget ေလးထည့္ၾကမယ္



ေအာက္ကေခါင္းစဥ္အလိုက္ လုပ္ေဆာင္နိဳင္တာေလးေတြပါ...
  • display post titles only
  • change the number of posts
  • change the number of characters of the post snippet/excerpt
  • show the post dates


ထည့္နည္းေလးကေတာ့  ရွင္းပါတယ္....

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript  မွာ ကုဒ္ေတြ ထည့္ေပးလိုက္ပါ

Option 1: သည္ကုဒ္ကေတာ့ post  snippets ပုံစံနဲ႕႔ပါ...

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LvkULIw-sT6tlRVKSKCof7dFRhc0-3092_JN5eg8JhVOFTIjK3XqvWunvizd9RcWRJIvldBqO1ismXgAXbzrhmDrVlBtSxec2ziR0_-ZPfg_heL14xRT3KhKmUKfNZhjeiiM8Qhqj6M9/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: သည္ကုဒ္ကေတာ့ Post Titles ေလးသာ ျပတဲ့  ကုဒ္ပါ။

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LvkULIw-sT6tlRVKSKCof7dFRhc0-3092_JN5eg8JhVOFTIjK3XqvWunvizd9RcWRJIvldBqO1ismXgAXbzrhmDrVlBtSxec2ziR0_-ZPfg_heL14xRT3KhKmUKfNZhjeiiM8Qhqj6M9/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. ေျပာင္းလဲေပးနိဳင္တာေလးေတြကေတာ့ 5 (option 1) နဲ႕  10 (option 2) တို႕ကို မိမိတို႕ ပို႕အေရအတြက္ လိုသလို ေျပာင္းနိဳင္ပါတယ္.. ေနာက္ထပ္ false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
မိမိတို႕ဘေလာ့ခ်ပ္သာ ကို your-blog ေနရာမွာ အစားထိုးေပးပါ။ ဒိုမိန္း အပါ၀င္ေပါ့
ဥပမာ.............။.............
http://www.your-site.com/feeds/posts/default....

4. Saveလိုက္ရင္ ရပါျပီဗ်ာ.... အဆင္ေျပပါေစ
သည္ေနရာ  ကေန အဆင္ေျပသလို ဘာသာျပန္သည္။
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

ေဒါင္းနည္းမသိခဲ့ပါက { ဒီမွာ } သြားလိုက္ပါ

0 comments:

Post a Comment

Download link ကိုႏွိပ္ျပီး ေနာက္ tab တစ္ခုနဲ႕ page တစ္ခုေပၚလာပါလိမ့္မယ္။ ငါး စကၠန္႕ေလာက္ ေစာင့္ေပးလိုက္ပါ။ ညာဘက္ေထာင့္မွာ Skip ဆိုတဲ့ button ေလးေပၚလာပါလိမ့္မယ္။ အဲဒီ skip ဆိုတဲ့ button ကိုႏွိပ္လုိက္ရင္ download ဆြဲလိုရတဲ့ page တစ္ခုက်လာပါလိမ့္မယ္။ အဲ့ဒီမွာ download လုပ္ႏိုင္ပါၿပီဗ်ာ