How To Add Automatic Recent Posts Slider With jQuery To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ မွာ Automatic Recent Posts Slider Widget ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားလည္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ား အလြယ္တကူ လုပ္နုိင္ေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ က်ေနာ္တင္ေပးတဲ့ Cond ေတြကုိ အမ်ားအားျဖင့္ Demo ျပေပးထားပါတယ္။ အခု ဒီ Cond ေလးကေတာ့ က်ေနာ္ ဆုိဒ္မွာလည္း သုံးေနတဲ့ Cond ေလးပါ။ Demo ကုိေတာ့ ကေနာ္ ဆုိဒ္မွာပဲ ၾကည့္ရွၾကပါ။

အဆင့္ ၁။

၁။Sign In Blogger

၂။ Template
Cond ေပါင္းထည့္ရမွာ စိတ္မခ်ပါက Backup/Restore အရင္လုပ္ေပးသင့္ပါတယ္။
၃။ Edit HTMl

၄။ Proceed
Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ

၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

]]></b:skin>

၆။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

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

၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

</body>

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

<!-- Start easy content slider by Mr ThangMing.com -->

<script src='http://mr-thangming.googlecode.com/files/Jquery.js' type='text/javascript'/>

<script src='http://mr-thangming.googlecode.com/files/EasySlider.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

 $("#slider").easySlider({

 auto: true,

 continuous: true

 });

});

//]]>

</script>

<!-- End easy content slider by Mr ThangMing.com -->

၉။ အားလုံးထည့္ၿပီးသြားရင္ Save Template Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။

 အဆင့္ ၂။

၁။ Layout

၂။ Add a Gadget

၃။ HTML/JavaScript

၄။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။

</script></center>

<center>

<div id="slider">

<script style="text/javascript" src="http://mr-thangming.googlecode.com/files/Slider.js"></script>

<script style="text/javascript">

 var numposts_gal = 15;

 var numchars_gal = 150;

 var random_posts = false; // random posts

</script>

<!-- replace with your web address (marked with red color) -->

<script src="http://mrthangming.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>

</center>

၅။ ထည့္ၿပီးရင္ Save Button ေလးကုိနုိပ္ေပးလုိက္ပါ။

မွတ္ခ်က္။   ။ http://mrthangming.blogspot.com ေနရာမွာ မိမိ၏ ဘေလာ့လိပ္စာ ထည့္ေပးပါ။ var numposts_gal = 15; ေနရာမွာ မိမိေပၚေစခ်င္တဲ့ Posts အေရအတြက္ ေျပာင္းနုိင္ပါတယ္။