-->

မီႏူး

Blog တြင္ ေနာက္ဆံုး Post မ်ားအား Slide Show ပံုစံျပဳလုပ္နည္း

Thursday, 8 August 2013.

ကၽြန္ေတာ္ဒီတစ္ေခါက္ေတာ႕ Blog နဲ႕ဆိုင္တဲ႕ HTML Code ေလးကို မွ်ေ၀ေပးမွာျဖစ္ပါတယ္။
ဘာေလးလည္းဆိုေတာ႕ မိမိရဲ႕ Blog မွာ ေနာက္ဆံုးတင္ခဲ႕တဲ႕ Post ေတြကို Slide Show ပံုစံေလးနဲ႕
 ျပေပးမယ္႕ Code ေလးဘဲျဖစ္ပါတယ္။ ထည္႕သြင္းပံုအဆင္႕ဆင္႕ကုိလည္း ေအာက္မွာေသခ်ာစြာေရးေပး
ထားပါတယ္။


Step-1 – Design > Page Elements
Step-2 – Add Gadget ကိုႏွိပ္ေပးပါ။
Step-3 - HTML/JavaScript ကိုေရြးေပးပါ။
Step-4 - ေအာက္က Code ေလးေတြကို Content အကြက္ၾကီးထဲမွာကူးထည္႕ေပးပါ။
Step-5 – Save
အားလံုးဘဲအဆင္ေျပၾကမယ္ထင္ပါတယ္ဗ်ာ။

<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://pyaephyommitd.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>

Comentários:

Post a Comment

မွတ္ခ်က္တစ္ခုအား အားေဆးတစ္ခုပါ။မွတ္ခ်က္မ်ားကိုေစာင့္ေမွ်ာ္ရင္း၊မွတ္ခ်က္ေပးမႈကိုအထူးေက်းဇူးတင္ရွိပါေႀကာင္း

Related Posts Plugin for WordPress, Blogger...
 
ေခတ္သစ္ၿမိဳ႕ေတာ္ © မွေႏြးေထြးစြာႀကိဳဆိုပါ၏။ |အမွားအယြင္း၊အခက္အခဲ တစ္စံုတစ္ရာေတြ႔ရွိပါက သီးခံနားလည္ခြင့္လႊတ္ေပးႀကပါလို႔ ေတာင္းပန္အပ္ပါတယ္။ |