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

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


မိမိရဲ႕ဘေလာ့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>

Credit : kp3(နည္းပညာ)