Blue Color Buttons Menu စတိုင္ေလးပါ

 

ကၽြန္ေတာ္တစ္ခါမွ Blog နဲ႕ပါတ္သတ္တဲ့ Post ေလးေတြမတင္ဘူးေသးပါဘူးခင္ဗ်ာ ..
အၾကံဳေသးလို႕ေနာ္. ဒီတစ္ခါေတာ့ ေအာင္ေအာင္(မကစ) ရဲ့ ပို႕စ္ေလးကိုေတြ႕လို႕
ျပန္ၿပီး Share ေပးလိုက္ပါတယ္ေနာ္.. Blog မိတ္ေဆြမ်ားအတြက္အသံုး၀င္မယ္လို႕ထင္ပါတယ္ဗ်ာ.
ဘေလာ့မိတ္ေဆြအေပါင္းတို႕ အတြက္ Button menu ေလးနဲ႕ မိမိတို႕ေခါင္းစဥ္ေလးေတြကို အထက္မွာ
မထားဘဲ ေဘး ဆိုဒ္ဘားးမွာ တန္းထားမယ္ဆိူုရင္ လွပေသသပ္တဲ့ ဒီဇိုင္းေလးကို တင္ဆက္လုိက္ပါျပီ
ေအာက္မွာ လိုအပ္တဲ့ကုဒ္ေတြနဲ႕အတူ လုပ္ေဆာင္ခ်က္နည္းလမ္းေတြကိုပါ တင္ေပးလိုက္ပါတယ္..
ဆက္လက္ ေလ့လာမွတ္သား နိဳင္ပါတယ္ေနာ္..

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

              ]]></b:skin>   ကုဒ္ကိုေတြ႕တာနဲ႕ သူ႕အေပၚကပ္ျပီး ေပးထားတဲ့ ကုဒ္ေတြကို ယူထည့္လိုက္ပါ။
                    သည္ကုဒ္ကို ရွာဖို႕  ခက္ခဲမွာပါ   သည္ေနရာမွာ   ၀င္ျပီး ၾကည့္ုလိက္ပါ..ရွင္းျပထားတယ္

.a-btn{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:10px 30px 10px 20px; position:relative; float:left; display:block; overflow:hidden; margin:10px; background:#9cedef; background:-webkit-gradient(linear,left top,left bottom,color-stop(#b7f2f4,0),color-stop(#7ce7ea,1)); background:-webkit-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:-moz-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:-o-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7f2f4', endColorstr='#7ce7ea',GradientType=0 ); border:1px solid #90c6c8; border-color:#90c6c8 #78bdc0 #65b6ba; -webkit-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); -moz-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-symbol{ font-family:'WebSymbolsRegular', cursive; color:#437b7d; text-shadow:0 1px 0 #bef3f5; font-size:20px; position:absolute; left:20px; width:20px; text-align:center; line-height:32px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .a-btn-text{ font-size:20px; color:#437b7d; text-shadow:0 1px 0 #bef3f5; line-height:16px; font-weight:bold; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; display:block; } .a-btn-slide-text{ font-family:Arial, sans-serif; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#555; text-shadow:0px 1px 1px rgba(255,255,255,0.9); } .a-btn:hover{ -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -ms-transform:scale(1.05); -o-transform:scale(1.05); transform:scale(1.05); } .a-btn:hover .a-btn-symbol{ opacity:0.5; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } .a-btn:active{ -webkit-transform:scale(0.95); -moz-transform:scale(0.95); -ms-transform:scale(0.95); -o-transform:scale(0.95); transform:scale(0.95); -webkit-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; -moz-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; }

မိမိတို႕ရဲ႕ လု္ပေဆာင္ခ်က္ျပီးပါက save template ေပါ့.....
ေနာက္ထပ္ လုပ္ေဆာင္ရမွာကေတာ့ လြယ္ပါတယ္.. ေအာက္မွာ ေျပာထားသလို ဆက္လုက္ပါေနာ္

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<div class="button-wrapper">
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                       <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                </div>   

 # ဆိုတဲ့ေနရာမွာ မိမိတို႕ရဲ႕ link ေတြကို အစားထိုးေပးရပါမယ္..
အနီေရာင္  ကာလာေနရာကေတာ့ မိမိတို႕ ေခါင္းစဥ္အမည္ေပါ့...
အဆင္ေျပေလာက္ပါျပီေနာ္  ..မေျပပါက ေအာ္ခဲ့ပါ............

Credit >> ေအာင္ေအာင္(မကစ)


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

Download အဆင္မေျပရင္ ေက်းဇူးျပဳၿပီးစာေလးေရးၿပီးေျပာခဲ့ပါဗ်ာ.. မိတ္ေတြမ်ားအားလံုး အတြက္ အဆင္ေျပေအာင္အတတ္ႏိုင္ဆံုးၾကိဳးစားေပးပါမယ္ခင္ဗ်ာ။

Posted in: နည္းလမ္းမ်ား