Slider ေလးလုပ္ရေအာင္ မိုးေကာင္းကင္မွ

က်ဳပ္ဒီေကာင္ေလးကို ရွာေနတာၾကာၿပီဗ်ာ အခုမွ ေတာကလားထြက္လာတဲ့ ကိုမုဆိုးႀကီးဆီမွာ ေတြ႔လို႔ ကူးယူခဲ့ပါ
တယ္။ လိုအပ္သူမ်ားလည္း သံုးႏိုင္ေအာင္ စုေဆာင္းထားလိုက္ပါၿပီ သေဘာက်သူမ်ား အိုင္တီမုဆိုးႀကီးကို ေက်း
ဇူးတင္ၾကပါ။ အိုင္တီမုဆိုးသို႔သြားရန္ =≥≥ သူရဲ့ေရးသားထားတာေလးကို ဖတ္ၾကည့္ၿပီး ကိုယ္တိုင္လုပ္ၾကည့္ပါ။

ကၽြန္ေတာ့္ဘေလာ့ရဲ႕ ညာဖက္ေဘးမွာ လုပ္ထားတဲ့ Slider ေလးမွာ သံုးထားတဲ့ code ေတြကို မွ်ေ၀ေပးလိုက္ ပါတယ္ဗ်ာ ပထမဆံုး Layout ကေန Add a Gadget ကို ဖြင့္ပါတယ္ အဲဒီထဲကမွ HTML/Java Scripts ကို ေရြးလိုက္ပါတယ္Title ေနရာမွာေတာ့ ႀကိဳက္တာထည့္ေပါ့ (ကၽြန္ေတာ္ကေတာ့ Update Posts လို႔ ထည့္ထားပါတယ္) ျပီးရင္ ေအာက္က Contents အကြက္ထဲမွာ ေအာက္က ကုဒ္ေတြကို ထည့္ေပးလိုက္ပါတယ္

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:225px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:225px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff 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:10px; height:20px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; 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> <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 = 230; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 11; acolor = "#666"; aBold = true; icon = " "; text = "Replys"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "ဒီေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာ/"; limitspy=4 intervalspy=4000 </script> <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> </div>



အဲဒီထဲမွာ "ဒီေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာ/" လို႔ ေရးထားတဲ့ေနရာမွာ ကိုယ့္ဘေလာ့ရဲ႕ URL ေပါ့ .. ဥပမာ ကၽြန္ေတာ့္ဘေလာ့အတြက္ဆိုရင္ "http://itmotesoeway.blogspot.com/" လို႔ ထည့္လိုက္တာေပါ့ ..(" နဲ႔ /" ေတြ က်န္ခဲ့တတ္ပါတယ္)
အဲဒီထဲမွာ boxwidth=230 ဆိုတာက ကိုယ့္ရဲ႕ ေနရာအက်ယ္အ၀န္းနဲ႔ ကိုက္ညီေအာင္ ခ်ိန္ၫွိရမယ့္ slider ရဲ႕ အက်ယ္ပါ View Blog မွာ သြားၾကည့္ အဆင္မေျပေသးရင္ ျပန္ျပင္ေပါ့ ..အဲဒီလိုပဲ  thumbwidth = 50 တို႔ thumbheight = 50 တို႔ ဆိုတာက ကိုယ့္ရဲ႕ Link Title ရဲ႕ေရွ႕က ပံုေလးရဲ႕ အက်ယ္နဲ႔ အျမင့္ေပါ့ .. က်န္တာေတြလည္း Value ေတြကို လိုသလို လိုက္ေျပာင္းလို႔ရပါတယ္ ..ကဲ .. အဆင္ေျပပါေစဗ်ာနည္းပညာလမ္းေၾကာင္းေပၚက သူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္ အိုင္တီမုဆိုး 
က်ဳပ္သေဘာက်လို႔ ကူးလာတာပါ လိုအပ္သူမ်ား လြယ္ကူစြာ အသံုးျပဳႏိုင္ရန္ ရည္ရြယ္ပါတယ္။ အားလံုး မပင္မပန္းဘဲ မိမိလိုအပ္တာေလးကို ယူငင္သံုးေဆာင္ႏိုင္ၾကပါေစ။ မိုးေကာင္းကင္ OHNTHAR ။

ဘေလာ့ေအာက္မွာ စာမ်က္ႏွာေလးေတြ ေပၚေအာင္လုပ္နည္း

In this post, im gonna explain how to add blogger page number  navigation  widget  with nice   style.

I will  include 3  style. You  can  choose it as your like.This will  helps to your  visitors  to visit every
page in your blog.  Im  using  java script ,CSS and  HTML for this widget.You can get my earlier post
about number navigation here.

မူရင္းဆိုက္ကေတာ့  http://www.bloggertrix.com/ ပါ


1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

Style 1

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px;  -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

7. Now save your HTML/Javascript'.

    You are done...
မူရင္းဆိုက္ကေတာ့ ဒီမွာပါကြယ္..http://www.bloggertrix.com/2012/11/attractive-numbered-page-navigation.html