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

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

ေတြတဲ့အတိုင္းပဲေနာ္ Slide သြားေနလိတ္မယ္
 ေရးခ်င္ဘူးပ်င္းတယ္ခိခိ.... ပံုဖ်က္ရတာကိုေတာ့စိတ္မရွည္ဘူး ဒါေပမဲ့ေရးလိုက္တယ္ဗ်ာ

သူငယ္ခ်င္း တစ္ေယာက္ေတာင္းဆိုလို့ပါေနာ္.......ခိခိ  စမယ္

အပၚမွာေတြ႕တဲ့အတိုင္းပဲေနာ္  ADD A GADGE နွိတ္ ေအာက္ပံုကိုၾကည့္

ေပၚျပဴလာပိုစ့္ထုတ္ျပီး SAVE လိုက္ေပါ့ေနာ္ ထုတ္ျပီးသားလူေတြြက ေတာ့ ဒီေအာက္အဆင့္ကစလုပ္ေနာ္....

ေအာက္ပံုကို ၾကည့္လိုက္ပါဦးေနာ္.

ေဘးဘားက ADD A GADGET ကုိနွိတ္ပါ

ေအာက္ပံုေလးကိုၾကည့္ပါ

HTML ထည့္ျပီးေတာ့ ေအာက္မွာ ေပးထားတဲ့ HTML COD ေတြကူျပီထည့္လိုက္ပါ

ျပီးရင္ SAVE လိုက္ပါ က်ြန္ေတာ္တို့အေပၚမွာထုတ္ထားတဲ့ Popular Pot ဟာ Slide ျဖစ္ေနမယ္

Popular Pot လုပ္ထားေသာေဘာင္ကို ၾကိဳက္တဲ့ေနရာေရႊလို့ရပါတယ္ေနာ္

အဆင္မေျပရင္ aunglaybc.blogspot.com@gmail.com အက္လိုက္ေနာ္ 

ေမးျခင္တာေမး ေျဖခ်င္တာေျဖေပးမယ္ ခိခိ..........။

ေအာက္မွာကုဒ္ယူပါ


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


 ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ www.aungsanmks.blogspot.com 

www.ledimyethar.com

 

Posted in: post/photo