ဘေလာ့မွာPopularPostsကိုSlideပံုစံေျပာင္းနည္း

 ဒီေန႕တင္တဲ့နည္းပညာကလည္းတကယ္လည္းလန္းတယ္ဗ်ာအသစ္ေလးပါ၊ဘေလာ့ဂါေလာမွာေခတ္စာေနတဲ့Content
Sliderေတြကိုခက္ခက္ခဲခဲအခ်ိန္ကုန္ျပီးလုပ္စရာမလိုေတာ့ပါဘူး။မိမိရဲ႕PopularPostsေတြကိုSliderပံုစံေျပာင္းလုပ္ၾကရ
ေအာင္ေနာ္၊ကုဒ္ကေတာ့အရမ္းရွင္းပါတယ္၊က်ေနာ္ေအာက္မွာပံုနဲ႕တကြျပထားေပးသလိုကုဒ္ထည့္ရမယ့္ေနရာေတြလည္း
ျပထားေပးပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးလည္းဝမ္သားမယ္လို႕လည္းေမ်ာ္လင့္သလိုအရမ္းၾကိဳက္ၾကမယ္လို႕လည္း
ထင္ပါတယ္။Htmlကုဒ္ထဲမွာဝင္စရာလည္းမလိုေတာ့ပါဘူးဗ်ာ။အီးေမးလ္မွာေတာင္းဆိုထားတဲဘေလာ့မိတ္ေဆြလည္းရွိပါတယ္။
တစ္ခ်က္ခုတ္ႏွစ္ခ်က္ျပတ္ဆိုသလိုေပါ့ေနာ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

မွတ္ခ်က္။ ။ပံုကအၾကီးနဲ႕ၾကည့္ခ်င္ရင္ပံုကိုထက္ျပီးClickႏိုပ္လိုက္ပါ။

မိမိရဲ႕ဘေလာ့Add A Gadget က Popular Postsကိုေအာက္ပံုမွာျပထားတဲ့အတိုင္းထည့္ေပးလိုက္ပါ။

ေအာက္ကေပးထားတဲ့ကုဒ္ကလည္းအေပၚမွာထည့္ေပးရမယ့္ေနရာျပထားေပးပါတယ္။

<style> 
@charset "utf-8"; 
/* CSS Document */ 
.lof-slidecontent, .lof-slidecontent a { 
 color:#FFF; 
} 
.lof-slidecontent a.readmore{ 
 color:#58B1EA; 
 font-size:95%; 
 
} 
.lof-slidecontent{ 
 position:relative; 
 overflow:hidden; 
 border:#F4F4F4 solid 1px; 
} 
.lof-slidecontent .preload{ 
 height:100%; 
 width:100%; 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:100000; 
 text-align:center; 
 background:#FFF 
} 
.lof-slidecontent .preload div{ 
 height:100%; 
 width:100%; 
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%; 
} 
.lof-main-outer{ 
 position:relative; 
 height:100%; 
 width:800px; 
 z-index:3px; 
 overflow:hidden; 
} 
 
/*******************************************************/ 
.lof-main-item-desc{ 
 z-index:100px; 
 position:absolute; 
 bottom:50px; 
 left:0px; 
 width:350px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png); 
 height:100px; 
 /* filter:0.7(opacity:60) */ 
 padding:10px; 
} 
.lof-main-item-desc p{ 
 margin:0 8px; 
 padding:8px 0 
} 
.lof-main-item-desc h3{ 
 padding:0; 
 margin:0 
} 
.lof-main-item-desc h2{ 
 padding:0; 
 margin:15px 0 0 0px; 
} 
.lof-main-item-desc h3 a{ 
 margin:0; 
 background:#C01F25; 
 font-size:75%; 
 padding:2px 3px; 
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; 
 text-transform:uppercase; 
 text-decoration:none 
} 
.lof-main-item-desc h3 a:hover{ 
 
 text-decoration:underline; 
} 
.lof-main-item-desc h3 i { 
 font-size:70%; 
} 
 
/* main flash */ 
ul.lof-main-wapper{ 
 /* margin-right:auto; */ 
 overflow:hidden; 
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%; 
 padding:0px; 
 margin:0   !important; 
 position:absolute; 
 overflow:hidden; 
} 
 
ul.lof-main-wapper li{ 
 overflow:hidden; 
 padding:0px   !important; 
 margin:0px; 
 float:left; 
 position:relative; 
} 
.lof-opacity  li{ 
 position:absolute; 
 top:0; 
 left:0; 
 float:inherit; 
} 
ul.lof-main-wapper li img{ 
 padding:0px  !important; 
} 
 
/* item navigator */ 
.lof-navigator-wapper { 
 position:absolute; 
 bottom:10px; 
 right:10px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat; 
 padding:5px 0px; 
} 
.lof-navigator-outer{ 
 position:relative; 
 z-index:100; 
 height:180px; 
 width:310px; 
 overflow:hidden; 
 color:#FFF; 
 float:left 
} 
ul.lof-navigator{ 
 top:0; 
 padding:0; 
 margin:0; 
 position:absolute; 
 width:100%; 
 background:none !important; 
 margin-top: 0 !important; 
 margin-left: 0 !important; 
 margin-right: 0 !important; 
} 
ul.lof-navigator li{ 
 cursor:hand !important; 
 cursor:pointer !important; 
 list-style:none !important; 
 padding:0 !important; 
 margin-left:0px !important; 
 overflow:hidden !important; 
 float:left !important; 
 display:block !important; 
 
 text-align:center !important; 
 
} 
ul.lof-navigator li img{ 
 border:#666 solid 3px; 
} 
ul.lof-navigator li.active img, ul.lof-navigator li:hover img { 
 border:#A8A8A8 solid 3px; 
} 
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{ 
 display:block; 
 width:22px; 
 height:30px; 
 color:#FFF; 
 cursor:pointer; 
 
} 
.lof-navigator-wapper .lof-next { 
 float:left; 
 text-indent:-999px; 
 margin-right:5px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center; 
} 
.lof-navigator-wapper .lof-previous { 
 float:left; 
 text-indent:-999px; 
 margin-left:5px; 
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center; 
} 
#lofslidecontent45 {width:880px;height:340px;} 
.lof-main-outer {width:880px; height:340px;} 
 
.lof-main-wapper img {height:340px !important; width:880px !important} 
.lof-navigator-wapper img {height:32px !important; width:80px !important} 
</style> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script> 
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script> 
<script type="text/javascript"> 
 $(document).ready( function(){ 
  var buttons = { previous:$('#lofslidecontent45 .lof-previous') , 
      next:$('#lofslidecontent45 .lof-next') }; 
 
  $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000, 
            direction  : 'opacitys', 
             easing   : 'easeOutBounce', 
            duration  : 1200, 
            auto    : true, 
            maxItemDisplay  : 10, 
            navPosition     : 'horizontal', // horizontal 
            navigatorHeight : 32, 
            navigatorWidth  : 80, 
            mainWidth:880, 
            buttons   : buttons} ); 
 }); 
</script>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
http://kp3family.blogspot.com/2012/02/kp3popularpostsslide.html မွ ကူးယူေဖာ္ျပျခင္းျဖစ္ပါတယ္။