Friday, May 30, 2014

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

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

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



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


ေအာက္ကေပးထားတဲ့ကုဒ္ကလည္းအေပၚမွာထည့္ေပးရမယ့္ေနရာျပထားေပးပါတယ္။
view plainprint?
  1. <style>  
  2. @charset "utf-8";  
  3. /* CSS Document */  
  4. .lof-slidecontent, .lof-slidecontent a {  
  5.  color:#FFF;  
  6. }  
  7. .lof-slidecontent a.readmore{  
  8.  color:#58B1EA;  
  9.  font-size:95%;  
  10.   
  11. }  
  12. .lof-slidecontent{  
  13.  position:relative;  
  14.  overflow:hidden;  
  15.  border:#F4F4F4 solid 1px;  
  16. }  
  17. .lof-slidecontent .preload{  
  18.  height:100%;  
  19.  width:100%;  
  20.  position:absolute;  
  21.  top:0;  
  22.  left:0;  
  23.  z-index:100000;  
  24.  text-align:center;  
  25.  background:#FFF  
  26. }  
  27. .lof-slidecontent .preload div{  
  28.  height:100%;  
  29.  width:100%;  
  30.  background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;  
  31. }  
  32. .lof-main-outer{  
  33.  position:relative;  
  34.  height:100%;  
  35.  width:800px;  
  36.  z-index:3px;  
  37.  overflow:hidden;  
  38. }  
  39.   
  40. /*******************************************************/  
  41. .lof-main-item-desc{  
  42.  z-index:100px;  
  43.  position:absolute;  
  44.  bottom:50px;  
  45.  left:0px;  
  46.  width:350px;  
  47.  background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);  
  48.  height:100px;  
  49.  /* filter:0.7(opacity:60) */  
  50.  padding:10px;  
  51. }  
  52. .lof-main-item-desc p{  
  53.  margin:0 8px;  
  54.  padding:8px 0  
  55. }  
  56. .lof-main-item-desc h3{  
  57.  padding:0;  
  58.  margin:0  
  59. }  
  60. .lof-main-item-desc h2{  
  61.  padding:0;  
  62.  margin:15px 0 0 0px;  
  63. }  
  64. .lof-main-item-desc h3 a{  
  65.  margin:0;  
  66.  background:#C01F25;  
  67.  font-size:75%;  
  68.  padding:2px 3px;  
  69.  font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;  
  70.  text-transform:uppercase;  
  71.  text-decoration:none  
  72. }  
  73. .lof-main-item-desc h3 a:hover{  
  74.   
  75.  text-decoration:underline;  
  76. }  
  77. .lof-main-item-desc h3 i {  
  78.  font-size:70%;  
  79. }  
  80.   
  81. /* main flash */  
  82. ul.lof-main-wapper{  
  83.  /* margin-right:auto; */  
  84.  overflow:hidden;  
  85.  background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;  
  86.  padding:0px;  
  87.  margin:0   !important;  
  88.  position:absolute;  
  89.  overflow:hidden;  
  90. }  
  91.   
  92. ul.lof-main-wapper li{  
  93.  overflow:hidden;  
  94.  padding:0px   !important;  
  95.  margin:0px;  
  96.  float:left;  
  97.  position:relative;  
  98. }  
  99. .lof-opacity  li{  
  100.  position:absolute;  
  101.  top:0;  
  102.  left:0;  
  103.  float:inherit;  
  104. }  
  105. ul.lof-main-wapper li img{  
  106.  padding:0px  !important;  
  107. }  
  108.   
  109. /* item navigator */  
  110. .lof-navigator-wapper {  
  111.  position:absolute;  
  112.  bottom:10px;  
  113.  right:10px;  
  114.  background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;  
  115.  padding:5px 0px;  
  116. }  
  117. .lof-navigator-outer{  
  118.  position:relative;  
  119.  z-index:100;  
  120.  height:180px;  
  121.  width:310px;  
  122.  overflow:hidden;  
  123.  color:#FFF;  
  124.  float:left  
  125. }  
  126. ul.lof-navigator{  
  127.  top:0;  
  128.  padding:0;  
  129.  margin:0;  
  130.  position:absolute;  
  131.  width:100%;  
  132.  background:none !important;  
  133.  margin-top: 0 !important;  
  134.  margin-left: 0 !important;  
  135.  margin-right: 0 !important;  
  136. }  
  137. ul.lof-navigator li{  
  138.  cursor:hand !important;  
  139.  cursor:pointer !important;  
  140.  list-style:none !important;  
  141.  padding:0 !important;  
  142.  margin-left:0px !important;  
  143.  overflow:hidden !important;  
  144.  float:left !important;  
  145.  display:block !important;  
  146.   
  147.  text-align:center !important;  
  148.   
  149. }  
  150. ul.lof-navigator li img{  
  151.  border:#666 solid 3px;  
  152. }  
  153. ul.lof-navigator li.active img, ul.lof-navigator li:hover img {  
  154.  border:#A8A8A8 solid 3px;  
  155. }  
  156. .lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{  
  157.  display:block;  
  158.  width:22px;  
  159.  height:30px;  
  160.  color:#FFF;  
  161.  cursor:pointer;  
  162.   
  163. }  
  164. .lof-navigator-wapper .lof-next {  
  165.  float:left;  
  166.  text-indent:-999px;  
  167.  margin-right:5px;  
  168.  background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;  
  169. }  
  170. .lof-navigator-wapper .lof-previous {  
  171.  float:left;  
  172.  text-indent:-999px;  
  173.  margin-left:5px;  
  174.  background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;  
  175. }  
  176. #lofslidecontent45 {width:880px;height:340px;}  
  177. .lof-main-outer {width:880px; height:340px;}  
  178.   
  179. .lof-main-wapper img {height:340px !important; width:880px !important}  
  180. .lof-navigator-wapper img {height:32px !important; width:80px !important}  
  181. </style>  
  182.   
  183. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
  184. <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>  
  185. <script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script>  
  186. <script type="text/javascript">  
  187.  $(document).ready( function(){  
  188.   var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,  
  189.       next:$('#lofslidecontent45 .lof-next') };  
  190.   
  191.   $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,  
  192.             direction  : 'opacitys',  
  193.              easing   : 'easeOutBounce',  
  194.             duration  : 1200,  
  195.             auto    : true,  
  196.             maxItemDisplay  : 10,  
  197.             navPosition     : 'horizontal', // horizontal  
  198.             navigatorHeight : 32,  
  199.             navigatorWidth  : 80,  
  200.             mainWidth:880,  
  201.             buttons   : buttons} );  
  202.  });  
  203. </script>  
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Asia Business Gate Way, MOD

Asia Business Gate Way, MOD
PaidVerts