မိမိ Blog မွာ.ေနာက္ဆံုးတင္ခဲ့ေသာ Post ကို Slide Show လုပ္နည္း

<br />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br />

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:400px;

}

#spylist ul{

width:275px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:200px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#81F7F3 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#81F7F3

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style><br />

<br />

 <script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Replys";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://kelvineinstein.blogspot.com/";

limitspy=4

intervalspy=4000

</script><br />

<br />

<div id="spylist"> <script type='text/javascript'>

//<![CDATA[

 /*

 * Recent Post with Spy effect for blogger.com

 * Script combined from bloggerstricks.com and spy effect from jqueryfordesigners.com

 * By Abu Farhan (www.abu-farhan.com)

 */

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script><br />

</div>

www.kelvineinstein.blogspot       ေနရာမွာ......မိမိBlog ရဲ႕လိပ္စာကိုအစားထိုးေပးပါ......

အဆင္ေျပပါေစခင္ဗ်ာ.......... 

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

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>  

204. ေနာက္ဆုံးတင္သမွ် Slider Post ေလးလုပ္နည္း

     
     
     အားလုံးေသာမိတ္ေဆြအေပါင္းတို႕ မဂၤလာပါေနာ္..သည္ေန႕ တင္ေပးမဲ့ နည္းပညာေလးကေတာ့ အရမ္းလန္းပါတယ္ဗ်ာ...
      ဘာလို႕လဲ ဆိုေတာ့ ဘာမွ အေကာင့္ေတြ ဘာေတြညာေတြ၀င္စရာမလိုဘဲ
     လုပ္နိဳင္ပါတယ္.. html ေတြကိုလဲ သြားစရာမလိုဘူးေနာ္..
      မိမိတို႕စိတ္တိုင္းက် လုပ္ျပီး ရလာတဲ့ ကုဒ္ေလးကိုဘဲ ေကာ္ပီယူလာျပီး blogger>>layout>>javascript ထဲကိုတန္းထည့္ေပးယုံနဲ႕....
     ဘေလာ့ကာမ်ား သိပ္လိုျခင္ ထားျခင္ၾကတဲ့ ေနာက္ဆုံးတင္သမွ် ဆိုတဲ့ ပို႕စ္ေလးေတြကို..slider ဒီဇိုင္းေလးနဲ႕ပါ ကြ်န္ေတာ့္ ဘေလာ့မွာ C-Box ေအာက္ကတင္ထားတာ ေတြ႕ၾကမွာပါ...ကဲ .....
     ႏွစ္သက္ၾကမယ္ဆိုတာ ယုံ ၾကည္ပါတယ္.... စမယ္ေနာ္..........
     ပဆမဆုံး ေနာက္ဆုံးတင္သမွ်စလုိက္တာေလးနဲ႕ လုပ္ဖို႕     သည္ေနရာ   ေလးကိုသြားလုိက္ပါ။
     ပုံေလးေတြ နဲ႕ ရွင္းျပလုိက္ပါမယ္...
     
      http://www.surfing-waves.com/feed.htm

Posted in: Blog အလွဆင္မယ္