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

ဘေလာ့မိတ္ေဆြအေပါင္းတို႕ အတြက္ 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 ေတြကို အစားထိုးေပးရပါမယ္..
အနီေရာင္  ကာလာေနရာကေတာ့ မိမိတို႕ ေခါင္းစဥ္အမည္ေပါ့...
               အဆင္ေျပေလာက္ပါျပီေနာ္  ..မေျပပါက ေအာ္ခဲ့ပါ............

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္.