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

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

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

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

ေအာက္ကေပးထားတဲ့ကုဒ္ကလည္းအေပၚမွာထည့္ေပးရမယ့္ေနရာျပထားေပးပါတယ္။
http://kp3family.blogspot.com/2012/02/kp3popularpostsslide.html#

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မိသားစုမွ ကူးယူထားျခင္းျဖစ္ပါတယ္ခင္ဗ်ာ ဒါအသံုး၀င္လို႔ပါ က်ဳပ္လည္းႀကိဳက္တယ္ေလ။အဲဒါေၾကာင့္..