Recent Post Slider For Blogger

ကၽြန္ေတာ္ Post မေရးျဖစ္တာလည္းၾကာေနၿပီဗ်ာ..
ဒီတစ္ေခါက္ေတာ့ အသံုးဝင္မယ့္ ေကာင္ေလးကိုတင္ေပးၿပီဗ်ာ..
Recent Post Slider ေလးပါ..။ ကၽြန္ေတာ့္ ဘေလာ့မွာတင္ထားသလိုမ်ိဳးေလးေပါ့.။
မိမိ ဘေလာ့မွာ တင္ထားၾကည့္ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္က အဆင့္ေလးေတြကို
လုပ္ၿပီး စမ္းၾကည့္လိုက္ပါေနာ္...။




Blogger ကိုေတာင္ သံုးေနက်ၿပီဆိုေတာ့ ကၽြန္ေတာ္ အစအဆံုးေတာ့ လုပ္မျပေတာ့ပါဘူး.

နားလည္လြယ္ေအာင္... အတိုခ်ဳံးပဲေရးလုိက္ပါေတာ့မယ္...။

ပထမဦးဆံုး မိမိ Blogger Home ကိုဝင္ပါမယ္..။

www.blogger.com/home ပါ..။

ေရာက္ၿပီဆိုရင္ .....

Blogger >> Template >> Edit HTML အထိေရာက္ေအာင္သြားပါ..။

ၿပီးရင္ Expand Widget Templates ဆိုတာေလးကို အမွန္ျခစ္ေပးပါ..။

အမွန္ျခစ္ေပးၿပီးၿပီဆိုရင္ Ctrl + F တြဲႏွိပ္ၿပီး ]]></b:skin> ဆိုတာေလးကိုရွာပါ..။

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

/* Here Recent Post Slider Code CSS Start Here */

#slide-container {
    height: 200px;
    position: relative;
    width: 500px;
}
#slider {
    height: 200px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 500px;
    font-family: calibri;}
.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
.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 {

    width: 500px;
    height: 200px;
    overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next {
    left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;}
ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;}
ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;}
ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;}

/* Here Recent Post Slider Code CSS End Here */

ကူးထည့္ၿပီးၿပီဆိုရင္..ေနာက္ထပ္...။ </body> ဆိုတဲ့ Tab ေလးကိုေတြ႕ေအာင္ရွာပါ..။
ေတြ႕ၿပီဆိုရင္ ... ေအာက္က Code ေလးေတြကို </body> Tab အေပၚမွာ ကူးထည့္ေပးပါ.။

<!--- Here Recent Post Slider Script Code Start -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>


<!--- Here Recent Post Slider Script Code End -->

ၿပီးရင္ Save Template ဆိုတာေလးကို ႏွိပ္ေပးပါ..။

Loading ျပေနတာေလး ၿပီးေအာင္ေစာင့္ေပးပါ.။

အဲ့ဒီေနာက္ Close ဆိုတာေလးကိုႏွိပ္ၿပီး ပိတ္လိုက္ပါ.။။

ပိတ္ၿပီးၿပီဆုိရင္ေတာ့..။

Blogger >> Layout >> Add a gadget >> HTML/JAVASCRIPT ဆိုတာေလးကိုႏွိပ္ၿပီး

ေအာက္က Code ေလးေတြကို Content ဆိုတဲ့ေနရာမွာ ကူးထည့္ပါ..။
 

<div id="slider">
<script style="text/javascript" src="http://btrixx.googlecode.com/files/recentslider.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://learner-guide.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

http://learner-guide.blogspot.com လို႕အနီေရာင္ေလးျပထားတဲ့ေနရာမွာ..

မိမိ ဘေလာ့ရဲ႕ Address ေလးကိုထည့္ေပးပါ..။


ထည့္ၿပီးၿပီဆိုရင္ Title ဆိုတဲ့ေနရာမွာ Space Bar တစ္ခ်က္ျခားၿပီး Save လုပ္ပါ..။

Save လုပ္ၿပီးရင္ အခု မိမိကူးထည့္ထားတဲ့ Code Widget ေလးကို မိမိ Post Slide ေပၚေစခ်င္တဲ့

ေနရာမွာ ေရႊ႕ၿပီးထားလိုက္ပါ..။

ေရႊ႕ၿပီးၿပီဆိုရင္ေတာ့...  Save arrangement ဆိုတာေလးကိုႏွိပ္ၿပီး View Blog ..

ဆိုတာေလးကိုႏွိပ္ၿပီး မိမိ ဘေလာ့ကိုျပန္ၾကည့္ၾကည့္လိုက္ပါ..။

Post Slider ေလး အလုပ္လုပ္ေနတာကိုေတြ႕ရမွာပါ..။

 ကၽြန္ေတာ္လည္း ကၽြန္ေတာ္နားလည္တာကို အျခားသူေတြနားလည္ေအာင္ျပန္ေရးထားတာမို႕.

အမွားတစ္စံုပါခဲ့သည္ရွိေသာ္.ခြင့္လြတ္ေပးၾကပါလို႕ ေတာင္းဆိုပါရေစ..။

အဆင္ေျပၾကပါေစခင္ဗ်ာ..။