Arrow Keyboard Navigation For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ မိမိတုိ႔၏ ဘေလာ့ေလးကုိ Computer Keyboard တြင္ပါ၀င္ေသာ Arrow( ျမားတံ) ေလးေတြနဲ႔ မိမိဘေလာ့ထဲက ပုိ႔(စ္)မ်ားကုိ Newer Post ႏွင့္ Older Post Button ေလးေတြအသုံးျပဳစရာမလုိပဲ Keyboard Arrow( ျမားတံ) ျဖင့္ Newer Post ႏွင့္ Older Post Button ႏွိပ္သကဲ့သုိ႔ အသုံးျပဳလုိ႔ရေအာင္ လုပ္နည္း/ထည့္နည္း ေလးကုိ မသိေသးတဲ့ ဘေလာ့ မိတ္ေဆြမ်ား အတြက္ မွ်ေ၀ေပးလုိက္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond လည္းထားေပးပါတယ္။<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://htmlsheen.blogspot.com/2012/10/blog-post.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div> <br /> <br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" /> <div class="alert" style="background-attachment: scroll; background-color: #fbe3e4; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTDgqCynraE7-sZ2TSoZ3ybuXlhMxpZDTvTG4xBlCazf8eo5IfYZIpUTYiR5QLw-AUJZCXu7Ar2t-V5-wKG-sGPYPLWag4ZweP3WtHuFwMvXT_phvA-syYVf5J6pQhX5A_3uquQT6GEAF/s1600/NBT+alert.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(251, 194, 196); color: #8a1f11; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;"> <b>သင့္ Blogger Account ၀င္ၿပီးမွသာ ဤ Widget Generator ကုိ အသုံးျပဳပါ</b></div> </div> <br /> <form action="http://www.blogger.com/add-widget" method="post" target="_blank"> <input name="widget.title" type="hidden" value="Arrow Key Nav" /><input name="widget.content" type="hidden" value="<script type='text/javascript'>document.onkeyup = function(event){if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;event = event || window.event;switch(event.keyCode){case 37:var newerLink = document.getElementById('Blog1_blog-pager-newer-link');if(newerLink !=null) window.location.href = newerLink.href;break;case 39:var olderLink = document.getElementById('Blog1_blog-pager-older-link');if(olderLink!=null) window.location.href = olderLink.href;}};</script>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="https://plus.google.com/u/0/103359415538823163001/posts" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form> </div> <br /> ထည့္နည္းကုိ မသိေသးတဲ့ မိတ္ေဆြမ်ားရွိခဲ့ရင္ ေအာက္ပုံ ကုိ ၾကည့္ၿပီး လုပ္ေဆာင္ပါ။<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s1600/addb_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s320/addb_1.gif" width="320" /></a></div> <br /> <br /> <br /></div>

Arrow Keyboard Navigation For Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ မိမိတုိ႔၏ ဘေလာ့ေလးကုိ Computer Keyboard တြင္ပါ၀င္ေသာ Arrow( ျမားတံ) ေလးေတြနဲ႔ မိမိဘေလာ့ထဲက...

Read more »

Number Page Navigation For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္)ေလးကေတာ့ Blogger သမားမ်ားအတြက္ အသုံး၀င္မယ့္  Number Page Navigation လုိ႔ေခၚေ၀ၚၾကတဲ့ Widget ေလးကုိ တင္ေပးလုိက္ပါတယ္။ မိိမိတုိ႔၏ Blog စာမ်က္ႏွာကုိ 1,2,3..etc စသည္ျဖင့္ ခြေက်ာ္လုိ႔ရေအာင္ ထည့္ခ်င္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ထပ္ၿပီး မွ်ေ၀ေပးလုိက္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link နဲ႔ တကြ Number Page Navigation Widget ကုိ Tools ျဖင့္ ထားေပးပါတယ္။ Cond ကေတာ့ 100% အလုပ္လုပ္တယ္လုိ႔ေျပာရင္လည္း မွားမယ္မထင္ပါဘူး။ တေကလုိ႔ အဆင္မေျပဘူးဆုိရင္ Comment Box မွာ ေမးလုိ႔ရပါတယ္။<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41D_yLhOt-rwanlwDTlhMyUJTvt_z_aXwMf2sSBDKnvnkbcaGww5a8l68c9TjUlsxwMcZ_J7YBzOW8IchkQJieJ4VQUpDl7QfEVa0fVCqbxSTc_RLj7JlXS7bxSX584RQaBz_87EwMLw/s1600/page+navigation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41D_yLhOt-rwanlwDTlhMyUJTvt_z_aXwMf2sSBDKnvnkbcaGww5a8l68c9TjUlsxwMcZ_J7YBzOW8IchkQJieJ4VQUpDl7QfEVa0fVCqbxSTc_RLj7JlXS7bxSX584RQaBz_87EwMLw/s1600/page+navigation.png" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://simpledemo.blogspot.com/" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div> <span style="color: #20124d; font-size: large;"><br /></span> <span style="color: #20124d; font-size: large;">မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ ထည့္နည္းကုိ အနည္းငယ္ ရွင္းျပေပးလုိက္ပါတယ္။</span><br /> <span style="color: #20124d; font-size: large;"><br /></span> <span style="color: #20124d; font-size: large;">၁။ <a href="http://www.blogger.com/" target="_blank">Sigin Blogger</a></span><br /> <br /> ၂။ မိမိႀကဳိက္တဲ့ Style ကုိ ေရြးပါ။<br /> <br /> ၃။ Setting ကုိေတာ့မိမိ ႀကဳိက္သလုိ ျပန္နုိင္ပါတယ္။ ဥပမာ_ Prev ကုိ Back , 5 ကုိ 8 ...etc</div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <span style="color: #20124d; font-size: x-large;">Numbered Page Navigation Widget Generator</span></div> </div> <iframe align="left" allowtransparency="true" frameborder="0" height="810px" marginheight="0" marginwidth="2" scrolling="no" src="http://mr-thangming.ucoz.com/page-navigation_MrThangMing.html" style="margin: 0px; padding: 0px;" width="100%"></iframe><br /> <span style="color: #20124d; font-size: large;"><br /></span> <span style="color: #20124d; font-size: large;"><br /></span> <span style="color: #20124d; font-size: large;">၄။ အားလုံးၿပီးရင္ Generate ကုိ ႏွိပ္ပါ ၿပီးရင္ Add To Blogger ပုံ Button ေလးကုိ ထပ္နွိပ္ေပးလုိက္ပါ။ ေအာက္ပုံ အတုိင္းဆက္လုပ္ေဆာင္ပါ။</span><br /> <span style="color: #20124d; font-size: large;"><br /></span> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5R0Dz_4pqPui4flvyWTwwmFzdGZD9_rZW1ubHX6COYSNiR5wqXYGD44dXEpnsbmig0DYjlETvRIvF3rQb2Y_82TKi32eH-XXp-63NeU5yLSIcMGja0lTfx_WBI58aRFClSCrclZBTOM/s1600/addb_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5R0Dz_4pqPui4flvyWTwwmFzdGZD9_rZW1ubHX6COYSNiR5wqXYGD44dXEpnsbmig0DYjlETvRIvF3rQb2Y_82TKi32eH-XXp-63NeU5yLSIcMGja0lTfx_WBI58aRFClSCrclZBTOM/s640/addb_1.gif" width="100%" /></a> </div> <span style="color: #20124d; font-size: large;"><br /></span> <span style="color: #20124d; font-size: large;">၅။ Blogger Home >>Layout ထဲ ေရာက္ရင္ ေအာက္ပုံအတုိင္ လုပ္ေပးလုိက္ပါ။ ၿပီးရင္ Save arrangement Button ကုိနွပ္ေပးလုိက္ပါ။</span><br /> <span style="color: #20124d; font-size: large;"><br /></span> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZQRTrNEATXAiWY4K8cg98ksABovYWTnA4bNM-r4rUNlEx-Lga15gU1AyFcDltqqImMOhD1UcNYlh9LJhkxdjBjiVjrFGO2RM3zaQA_ymYwi8HdsV2vDSHk45ua01erpjaRmxmp7DZ2U/s1600/add+layout_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZQRTrNEATXAiWY4K8cg98ksABovYWTnA4bNM-r4rUNlEx-Lga15gU1AyFcDltqqImMOhD1UcNYlh9LJhkxdjBjiVjrFGO2RM3zaQA_ymYwi8HdsV2vDSHk45ua01erpjaRmxmp7DZ2U/s640/add+layout_1.gif" width="100%" /></a></div> <br /></div>

Number Page Navigation For Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္)ေလးကေတာ့ Blogger သမားမ်ားအတြက္ အသုံး၀င္မယ့္  Number Page Navigation လုိ႔ေခၚေ၀ၚၾကတဲ့ Widget ေလးကုိ တင...

Read more »

How To Add Animated CSS3 Bubble Buttons To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ္ေဆြေတြလည္းရွိေကာင္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့မိတ္ေဆြေတြ အတြက္ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္နုိင္ရန္ လင့္(ခ္) နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ အဆင္မေျပတာရွိရင္ Comment မွာ ျပန္ေမးလုိ႔ရပါတယ္။<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Animated CSS3 Bubble Buttons"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://exe-idea.blogspot.com/2012/10/blog-post_28.html" target="_blank" title="Go Check Out The Demo Live"><span style="font-size: large;">Preview</span></a></div>  ၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br /> <br /> ၂။ Template<br /> <br /> ၃။ Edit HTML<br /> <br />  ၄။ Proceed<br /> <br /> ၅။ ေအာက္က Cond ကုိရွာ ပါ။ Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br /> <br /> <pre class="cpp" name="code">]]></b:skin> </pre> <br /> <br /> ၆။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။<br /> <br /> <pre class="cpp" name="code">.button {     font: 15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */     text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */     text-decoration: none !important;     white-space: nowrap;     display: inline-block;     vertical-align: baseline;     position: relative;     cursor: pointer;     padding: 10px 20px;     background-repeat: no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */     background-position: bottom left;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */     background-position: bottom left, top right, 0 0, 0 0;     background-clip: border-box; /* Applying a default border raidus of 8px */     -moz-border-radius: 8px;     -webkit-border-radius: 8px;     border-radius: 8px; /* A 1px highlight inside of the button */     -moz-box-shadow: 0 0 1px #fff inset;     -webkit-box-shadow: 0 0 1px #fff inset;     box-shadow: 0 0 1px #fff inset; /* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */     -webkit-transition: background-position 1s;     -moz-transition: background-position 1s;     transition: background-position 1s; } .button:hover { /* The first rule is a fallback, in case the browser does not support multiple backgrounds */     background-position: top left;     background-position: top left, bottom right, 0 0, 0 0; } .button:active { /* Moving the button 1px to the bottom when clicked */     bottom: -1px; } /* The three buttons sizes */ .button.big {     font-size: 30px; } .button.medium {     font-size: 18px; } .button.small {     font-size: 13px; } /* A more rounded button */ .button.rounded {     -moz-border-radius: 4em;     -webkit-border-radius: 4em;     border-radius: 4em; } /* Defining four button colors */ /* BlueButton */ .blue.button {     color: #0f4b6d !important;     border: 1px solid #84acc3 !important; /* A fallback background color */     background-color: #48b5f2; /* Specifying a version with gradients according to */     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(    center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover {     background-color: #63c7fe;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(    center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button {     color: #345903 !important;     border: 1px solid #96a37b !important;     background-color: #79be1e;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover {     background-color: #89d228;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button {     color: #693e0a !important;     border: 1px solid #bea280 !important;     background-color: #e38d27;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover {     background-color: #ec9732;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } .gray.button {     color: #525252 !important;     border: 1px solid #a5a5a5 !important;     background-color: #a9adb1;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover {     background-color: #b6bbc0;     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);     background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }</pre> <br /> ရ။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br /> <br /> ၈။ Animated CSS3 Bubble Buttons ျဖင့္ေပၚေစခ်င္တဲ့ စာကုိ ေအာက္က Cond အတုိင္ ထည့္ေပးလုိက္ပါ။ <span style="background-color: white; line-height: 20px; text-align: left;"> </span><span style="background-color: white; line-height: 20px; text-align: left;">HTML Cond ထည့္လုိ႔ရတဲ့ ေနရာေတြမွာ ထည့္သြင္းအသုံးျပဳနုိင္ပါတယ္။</span><br /> <span style="background-color: white; line-height: 20px; text-align: left;"><br /></span> <u><span style="color: blue; font-size: large;"><span style="background-color: white; line-height: 20px; text-align: left;">၁။ </span><span style="line-height: 20px;">HTML For Big Button</span></span></u><br /> <span style="background-color: white; line-height: 20px; text-align: left;"><br /></span> <span style="background-color: white; line-height: 20px; text-align: left;"></span><br /> <pre class="cpp" name="code"><a href="LINK HERE" class="button big blue">TEXT HERE</a></pre> <br /> <span style="color: blue; font-size: large;"><u>2။ <span style="background-color: white; line-height: 20px; text-align: left;">HTML For Medium Button</span></u></span><br /> <span style="background-color: white; line-height: 20px; text-align: left;"><span style="color: blue; font-size: large;"><u><br /></u></span></span> <span style="background-color: white; line-height: 20px; text-align: left;"></span><br /> <pre class="cpp" name="code"><a href="LINK HERE" class="button blue medium">TEXT HERE</a></pre> <br /> <span style="color: blue; font-size: large;"><u>3။ <b style="background-color: white; line-height: 20px; text-align: left;">HTML For Small Button</b></u></span><span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"> </span><br /> <span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"><br /></span> <span style="background-color: white; line-height: 20px; text-align: left;"></span><br /> <pre class="cpp" name="code"><a href="LINK HERE" class="button small blue">TEXT HERE</a></pre> <br /> <div style="text-align: left;"> <span style="color: blue; font-size: large;"><u><span style="line-height: 20px;">4။ </span><b style="background-color: white; line-height: 20px;">HTML For Small Rounded Buttons </b></u></span></div> <br /> <pre class="cpp" name="code"><a href="LINK HERE" class="button small blue rounded">TEXT HERE</a> </pre> <br /> မွတ္ခ်က္။ ။ blue ေနရာ မွာ မိမိ ႀကဳိက္တဲ့ အေရာင္/Colour ေျပာင္းနုိင္ပါတယ္။</div>

How To Add Animated CSS3 Bubble Buttons To Blogger

ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ...

Read more »

ဘေလာ့မွာ Button Page နဲံ႔ စာမ်က္နွာခြေက်ာ္ခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on"> ဒီေန့က်ေတာ္တင္ေပးရတာက ဘေလာ့ေအာက္ေျခက newer post , home နဲ့<br /> older post တုိ့ကုိ 1 2 3 စသည့္ဂဏိန္းလုံးေလးေတြျဖင့္စာမ်က္နွာကုိခြေက်ာ္<br /> နည္းေလးပါဗ်ာ။မသိေသးတဲ့မိတ္ေဆြေတြကုိမွ်ေ၀းေပးတာပါ။<br /> <br /> <br /> <a href="http://www.blogger.com/blogger.g?blogID=7388332448929021318" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVqILp7L59L1PW31wZDKbr7F3tOxoEjHMFbqCESl_7JbgbzyUvw9vtoqWzNjC3HJAly0naR7r3tQz6mwOs23MVvR2Qu1WZ9GsRYEmd-PbAqWA7OumJSzngrEi0aBVFx65khW51VZxHE_8/s1600/mrthangming0.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVqILp7L59L1PW31wZDKbr7F3tOxoEjHMFbqCESl_7JbgbzyUvw9vtoqWzNjC3HJAly0naR7r3tQz6mwOs23MVvR2Qu1WZ9GsRYEmd-PbAqWA7OumJSzngrEi0aBVFx65khW51VZxHE_8/s400/mrthangming0.JPG" width="480" /></a></div> <br /> <br /> ၁။Design<br /> <br />  ၂။Layout<br /> <br />  ၃။Add a Gadget<br /> <br />  ၄၊၊HTML/JavaScript<br /> <br /> ၅။ေအာက္ကေပးထားေသာ cond ေလးကုိထည့္ေပးလုိက္ပါ။ <br /> <div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="အကုန္ကူးမယ္" /> </div> <div align="center"> </div> <div align="center"> <textarea cols="55" name="txt" rows="100" style="height: 200px; width: 450px;" wrap="VIRTUAL"> <style type="text/css">.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style="">var pageCount=20;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style="" src="http://sites.google.com/site/hahaheeheesite/Home/blogger-page-nav-v2.js?attredirects=0&d=1"></script>