Mr ThangMing: Popular Posts

<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/AVvXsEhyMgGVxsyowr6FCIz51IfEkTZhoLdw9ztFPFa69CHnFu0nmCNgW0aELYyy7LEaelVdCIzKHwJQX2tQmbpRs9N3Y50DSvJ5XCCuIJGpoa96MynEXdaQG6vU7H6u-ZMG6m998feeKwfS1K8/s1600/RECENT~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMgGVxsyowr6FCIz51IfEkTZhoLdw9ztFPFa69CHnFu0nmCNgW0aELYyy7LEaelVdCIzKHwJQX2tQmbpRs9N3Y50DSvJ5XCCuIJGpoa96MynEXdaQG6vU7H6u-ZMG6m998feeKwfS1K8/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/AVvXsEiHfgFBrshrABhXuNz_3i6lK4gr6ZFUSlCQlE3e21rqq8om6dJCjgGAeGuuZVIOamZFg_8qjsq3YNDZmCyr6dnZLzOXOpDiO5MyOTYdZP7Fpe-ss4Rdh-06_Zv11jCXaeoRM-bOBxBhrcE/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/AVvXsEiHfgFBrshrABhXuNz_3i6lK4gr6ZFUSlCQlE3e21rqq8om6dJCjgGAeGuuZVIOamZFg_8qjsq3YNDZmCyr6dnZLzOXOpDiO5MyOTYdZP7Fpe-ss4Rdh-06_Zv11jCXaeoRM-bOBxBhrcE/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>

</pre>
<br />
၆။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">/* START EasySlider By Mrthangming.com */

#slide-container {

height: 260px;

position: relative;

width: 320px;

}

#slider {

height: 260px;

left: 0px;

overflow-x: hidden;

overflow-y: hidden;

position: relative;

width: 320px;

font-family: calibri;

}

.slide-desc {

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5AgE44NjIyDbg0aZd34Dd4tpSIU93BdByiIUVyYeuMlnSGNCzvOqIcv36oG-MjT-paUsNxlA2sA12rZFOjwRy_JFSei1-q5gxpVr9auXJoeZswmzF3G1jXrKJwRuOFFn_x19BEYrnWo/s1600/darkbg.png) repeat scroll 0 0;

color: #99FF33;

padding: 0px;

position: absolute;

right: 0px;

text-align: left;

top: 0;

width: 145px;

z-index: 99FF33;

}

.slide-desc h2 {

display: block;

}

.crosscol .widget-content {

position: relative;

}

#slider ul, #slider li,

#slider2 ul, #slider2 li {

margin: 0;

padding: 0;

list-style: none;

}

#slider2 {

margin-top: 1em;

}

#slider li, #slider2 li {

/* END EasySlider By Mrthangming.com */

</pre>
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></body>

</pre>
<br />
၈။ ေတြ႕ၿပီးဆုိရင္ </body> ရဲ႕ အေပၚ(သုိ႔မဟုတ္)ေအာက္ တစ္ေနရာမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">

//<![CDATA[

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true

});

//]]>

</script>

</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>

var numposts_gal = 15;

var numchars_gal = 150;

var random_posts = false; // random posts

</script>

</div>

</center>

</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 ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း...

<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/AVvXsEgQBvvYzDbV2XQBuyGxfLDXpaV-mpplu2Sbvjq8nPCLfSGnfZVZjkE9_mE3mhLYw8GYvXMX5LeTxcEDrgHfCoYd-JUsfldVYxIlj2qKt2lWMzsH_ThvxvxudlqQeDxizY-I2TtmD6HAOsk/s1600/recent+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBvvYzDbV2XQBuyGxfLDXpaV-mpplu2Sbvjq8nPCLfSGnfZVZjkE9_mE3mhLYw8GYvXMX5LeTxcEDrgHfCoYd-JUsfldVYxIlj2qKt2lWMzsH_ThvxvxudlqQeDxizY-I2TtmD6HAOsk/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>

</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.....အားလုံးေသာမိတ္ေဆြမ်ား ေကာင္းေသာေန႔သစ္ေလးမွာ မဂၤလာပါ။ အခ်ိန္ေတြမရလုိ႔ ပုိ႔(စ္) အသစ္ေလးေတြ မတင္နုိင္တာၾကားပါၿပီး။ ဒီေန႔ေတာ့ အခ်ိန္ရ...

Mr ThangMing

How To Add Automatic Recent Posts Slider With jQuery To Blogger

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

Activity Find

Labels

Archives