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.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

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/AVvXsEjTHgku3vipq_SRA2Uhpsj8YjQw7Job7KkQly_TilJNJizfCNjHRRU-PJZxEmk-HHbTqdGMyADggFHt71AhJCQo3ZK-Tzg0yVyu0sPuNL2PHORI-dqB5bQNYp9Q6SYV5D8m9aOi0VD5cT79/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/AVvXsEjTHgku3vipq_SRA2Uhpsj8YjQw7Job7KkQly_TilJNJizfCNjHRRU-PJZxEmk-HHbTqdGMyADggFHt71AhJCQo3ZK-Tzg0yVyu0sPuNL2PHORI-dqB5bQNYp9Q6SYV5D8m9aOi0VD5cT79/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လိုက္ရင္ ရပါျပီဗ်ာ.... အဆင္ေျပပါေစ

သည္ေနရာ  ကေန အဆင္ေျပသလို ဘာသာျပန္သည္။

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

Posted in: Blogger Widget, Blogs Post