How To Add Automatic Recent Posts Slider With jQuery To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ မွာ Automatic Recent Posts Slider Widget ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားလည္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ား အလြယ္တကူ လုပ္နုိင္ေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ က်ေနာ္တင္ေပးတဲ့ Cond ေတြကုိ အမ်ားအားျဖင့္ Demo ျပေပးထားပါတယ္။ အခု ဒီ Cond ေလးကေတာ့ က်ေနာ္ ဆုိဒ္မွာလည္း သုံးေနတဲ့ Cond ေလးပါ။ Demo ကုိေတာ့ ကေနာ္ ဆုိဒ္မွာပဲ ၾကည့္ရွၾကပါ။<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpN6-Fu1aRZTBXgAouCCAoPmJ3E_YkzS9BIHzGN75mh73iYJ0E3M1N-Y8eL7Cn0HagNggoab9U29TTFAFHQURmjGPSYmsvWTgLo4t2c7aPNPXFzq5T-8QNPG-lY_P6K7tNI-J1ZeqXl4/s1600/RECENT~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpN6-Fu1aRZTBXgAouCCAoPmJ3E_YkzS9BIHzGN75mh73iYJ0E3M1N-Y8eL7Cn0HagNggoab9U29TTFAFHQURmjGPSYmsvWTgLo4t2c7aPNPXFzq5T-8QNPG-lY_P6K7tNI-J1ZeqXl4/s1600/RECENT~1.PNG" /></a></div><span style="color: orange; font-size: x-large;"><b>အဆင့္ ၁။</b></span><br /><span style="color: orange; font-size: x-large;"><b><br /></b></span></div>၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br /><br />၂။ Template<br />Cond ေပါင္းထည့္ရမွာ စိတ္မခ်ပါက <a href="http://mrthangming.blogspot.com/2012/11/how-to-backuprestore-your-blogger.html" target="_blank" title="Take a Backup/Restore of your template">Backup/Restore</a> အရင္လုပ္ေပးသင့္ပါတယ္။<br />၃။ Edit HTMl<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIoaIM1ubEfRLRVlY4BcYDSbTWthma4O64h8r72r_6PEx7gSWPxDsDZsbYZ3ZT6T4NwZAkzOhSTaDCQ63EUnBsv5jeu3BkHYEvUOVkVqvscmtdiXk1TQloLkOEpKJRCF1w-9WbKntMPys/s1600/%E1%81%86%E1%81%8B+Edit+HTML.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="Tick the Expand Widget Templates check box on top right of the HTML window...."><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIoaIM1ubEfRLRVlY4BcYDSbTWthma4O64h8r72r_6PEx7gSWPxDsDZsbYZ3ZT6T4NwZAkzOhSTaDCQ63EUnBsv5jeu3BkHYEvUOVkVqvscmtdiXk1TQloLkOEpKJRCF1w-9WbKntMPys/s1600/%E1%81%86%E1%81%8B+Edit+HTML.png" /></a>၄။ Proceed<br />Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ <br /><br />၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br /><br /><pre class="cpp" name="code">]]></b:skin><br /><br /></pre><br />၆။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br /><br /><pre class="cpp" name="code">/* START EasySlider By Mrthangming.com */<br /><br /><br /><br />#slide-container {<br /><br />    height: 260px;<br /><br />    position: relative;<br /><br />    width: 320px;<br /><br />}<br /><br /><br /><br />#slider {<br /><br />    height: 260px;<br /><br />    left: 0px;<br /><br />    overflow-x: hidden;<br /><br />    overflow-y: hidden;<br /><br />    position: relative;<br /><br />    width: 320px;<br /><br />    font-family: calibri;<br /><br />}<br /><br /><br /><br />.slide-desc {<br /><br />    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMr28ZCwQBIP2OKvYN1HUnUMWG3LYkMYIZraOgBvk4hLcu9H-UgDrD_syZ2oo4YTk9AUYjiV9tEyjG4Q4fu4XedQ3iZ2YatILNfz_9BzxjE_T1K_vVCq5iHy4eKNDQtwW8PnFJkledLvw/s1600/darkbg.png) repeat scroll 0 0;<br /><br />    color: #99FF33;<br /><br />    padding: 0px;<br /><br />    position: absolute;<br /><br />    right: 0px;<br /><br />    text-align: left;<br /><br />    top: 0;<br /><br />    width: 145px;<br /><br />    z-index: 99FF33;<br /><br />}<br /><br /><br /><br />.slide-desc h2 {<br /><br />    display: block;<br /><br />}<br /><br /><br /><br />.crosscol .widget-content {<br /><br />    position: relative;<br /><br />}<br /><br /><br /><br />#slider ul, #slider li,<br /><br /><br /><br />#slider2 ul, #slider2 li {<br /><br />    margin: 0;<br /><br />    padding: 0;<br /><br />    list-style: none;<br /><br />}<br /><br /><br /><br />#slider2 {<br /><br />    margin-top: 1em;<br /><br />}<br /><br /><br /><br />#slider li, #slider2 li {<br /><br />/*<br /><br /><br /><br />/* END EasySlider By Mrthangming.com */<br /><br /></pre>၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br /><br /><pre class="cpp" name="code"></body><br /><br /></pre><br />၈။ ေတြ႕ၿပီးဆုိရင္ </body> ရဲ႕ အေပၚ(သုိ႔မဟုတ္)ေအာက္ တစ္ေနရာမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br /><br /><pre class="cpp" name="code"><!-- Start easy content slider by Mr ThangMing.com --><br /><br /><script src='http://mr-thangming.googlecode.com/files/Jquery.js' type='text/javascript'/><br /><br /><script src='http://mr-thangming.googlecode.com/files/EasySlider.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br />$(document).ready(function(){<br /><br /> $("#slider").easySlider({<br /><br /> auto: true,<br /><br /> continuous: true<br /><br /> });<br /><br />});<br /><br />//]]><br /><br /></script><br /><br /><!-- End easy content slider by Mr ThangMing.com --><br /><br /></pre><br />၉။ အားလုံးထည့္ၿပီးသြားရင္ Save Template Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။<br /><br /><div><br /></div><div><span style="color: orange; font-size: x-large;"><b> အဆင့္ ၂။</b></span></div><div><br /></div><div>၁။ Layout<br /><br />၂။ Add a Gadget<br /><br />၃။ HTML/JavaScript<br /><br />၄။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br /><br /><pre class="cpp" name="code"></script></center><br /><br /><center><br /><br /><div id="slider"><br /><br /><script style="text/javascript" src="http://mr-thangming.googlecode.com/files/Slider.js"></script><br /><br /><script style="text/javascript"><br /><br /> var numposts_gal = 15;<br /><br /> var numchars_gal = 150;<br /><br /> var random_posts = false; // random posts<br /><br /></script><br /><br /><!-- replace with your web address (marked with red color) --><br /><br /><script src="http://mrthangming.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /><br /></div><br /><br /></center><br /><br /></pre><br />၅။ ထည့္ၿပီးရင္ Save Button ေလးကုိနုိပ္ေပးလုိက္ပါ။<br /><br /><span style="font-size: x-large;"><b>မွတ္ခ်က္။   ။</b></span><a href="http://mrthangming.blogspot.com/"> http://mrthangming.blogspot.com</a> ေနရာမွာ မိမိ၏ ဘေလာ့လိပ္စာ ထည့္ေပးပါ။ var numposts_gal = 15; ေနရာမွာ မိမိေပၚေစခ်င္တဲ့ Posts အေရအတြက္ ေျပာင္းနုိင္ပါတယ္။<br /><br /><br /></div></div>

How To Add Automatic Recent Posts Slider With jQuery To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ မွာ Automatic Recent Posts Slider Widget ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်...

Read more »

How To Add Thumbnail Recent Post Widgets Version (1) To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">Hello.....အားလုံးေသာမိတ္ေဆြမ်ား ေကာင္းေသာေန႔သစ္ေလးမွာ မဂၤလာပါ။ အခ်ိန္ေတြမရလုိ႔ ပုိ႔(စ္) အသစ္ေလးေတြ မတင္နုိင္တာၾကားပါၿပီး။ ဒီေန႔ေတာ့ အခ်ိန္ရလာၿပီး Thumbnail Recent Post ေလးကုိ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ေ၀မွ်ေပးလုိက္ပါတယ္။ အၿမဲလုိလာေရာက္အားေပးေနၾကတဲ့ မိတ္ေဆြေတြကုိလည္း အထူးေက်းဇူးတင္ရွိပါတယ္။ ေအာက္မွာ Demo ပုံ နွင့္ တကြ Cond ေပးထားပါတယ္။<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGceKbtzL_vvgJfpk2rJoGCiwxVU1oD01BzLMErYbM5VfdxkLo-u3sBrFO5k0bhlGVGncRu8XCUDMllD_-D2dRDWdlnLq9eXFaek1W_X-DtmWgMY2XUyQ0HrYT4GUvP-AfpbJimthcCIE/s1600/recent+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGceKbtzL_vvgJfpk2rJoGCiwxVU1oD01BzLMErYbM5VfdxkLo-u3sBrFO5k0bhlGVGncRu8XCUDMllD_-D2dRDWdlnLq9eXFaek1W_X-DtmWgMY2XUyQ0HrYT4GUvP-AfpbJimthcCIE/s1600/recent+posts.png" /></a></div>၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br /><br />၂။ Layout<br /><br />၃။ Add a Gadget<br /><br />၄။ HTML/JavaScript<br /><br />၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br /><br /><pre class="cpp" name="code"><script language="JavaScript">imgr = new Array();imgr[0]="http://i43.tinypic.com/orpg0m.jpg";imgr[1]="http://i43.tinypic.com/orpg0m.jpg";imgr[2]="http://i43.tinypic.com/orpg0m.jpg";imgr[3]="http://i43.tinypic.com/orpg0m.jpg";imgr[4]="http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 298;cellspacing = 8;borderColor = "#ffffff";bgTD = "#000000";thumbwidth = 50;thumbheight = 50;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 50;summarFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 5;home_page = "http://www.mrthangming.blogspot.com/";</script><script src="http://mrthangming.googlecode.com/files/recent%20posts.js" type="text/javascript"></script><br /><br /></pre><br />၆။ ထည့္ၿပီးရင္ Save Button ကုိနုိပ္ေပးလုိက္ပါ။<br /><br />မွတ္ခ်က္။   ။<a href="http://www.mrthangming.blogspot.com/">http://www.mrthangming.blogspot.com/</a> ေနရာမွာ မိိမိ၏ Blog/Website လိပ္စာ နွင့္ အစားထုိးေပးလုိက္ပါ။(ေျပာင္းေပးပါ)<br /><br /></div>

How To Add Thumbnail Recent Post Widgets Version (1) To Blogger

Hello.....အားလုံးေသာမိတ္ေဆြမ်ား ေကာင္းေသာေန႔သစ္ေလးမွာ မဂၤလာပါ။ အခ်ိန္ေတြမရလုိ႔ ပုိ႔(စ္) အသစ္ေလးေတြ မတင္နုိင္တာၾကားပါၿပီး။ ဒီေန႔ေတာ့ အခ်ိန္ရလ...

Read more »