Blog မွာ WaterEffect CSS Download Buttons ထဲ့နည္း

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

Ctrl + F အကူအညီနဲ႕ ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1IihvYHGdZzaCNo5VCk4SpnGWEgy2g9MeFj09xZyYguSaryoBwo20dCwjeFDPCNtovMXoSfNbxqQt2y1bqdXgkyMld_yQtw9W4nLMs88uOMKbPZCYDoZoqdn0TlcZdyDBNaEmtgW3Bbe/s144/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));
}

ေအာက္က Code ေတြကကိုယ္ပိုစ့္တင္တိုင္း Download link ေပးတဲ့ေနရာမွာသံုး
ရမဲ့ Code ေတြပါ။အဲဒီ Code ကို Notepad နဲ႕ Save ထားျပီးေနာက္ပိုင္း post တင္
တုိင္းဆက္လက္အသံုးခ်ႏိုပ္ပါျပီဗ်ာ.....

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

အနီေရာင္ျပထားတဲ့ Blue,orange စသည္တို႕က Download button ေတြကိုအေရာင္
ေတြပါ

Your Link ေနရာမွာ Download link ထဲ့ေပးပါ

Live Demo ဆိုတဲ့ေနရာမွာ ႏွစ္သက္ရာေရးလို႕ရပါတယ္နမူနာအေနနဲ႕ Download
ရယူရန္ Click ဆိုျပီးထဲ့ျပထားပါတယ္။
                                           REF: Here 

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

Read More

Button Style လွလွေလးေတြ လာျပီေနာ္ ( Blogger Only )

 

မဂၤလာပါ  ဘေလာ့ခရီးသည္ ပရိတ္သတ္ၾကီးးေရ...ခုတင္တဲ့နည္းလမ္းေလးကေတာ့  မိမိတို႕ဘေလာ့ေပးမွာ   Button  လန္းလန္းေလးေတြ သုံးျခင္သေူတြအတြက္ နည္းလမ္းေကာင္းေလးပါ..

ဒါေလးကေတာ့ ၄ မ်ိဳးတင္ေပးထားပါတယ္...  အၾကီး...အလတ္...အေသး..ေသး၀ိုင္း...ဆိုတဲ့

ဆိုဒ္အရြယ္အစား  ေတြကို ခြဲျခားတယ္ျပေပးလိုက္ပါတယ္ေနာ္... လိုအပ္သူမ်ားသုံးဆြဲ နိဳင္ပါတယ္..

ကဲ ေအာက္မွာ နည္းလမ္းနဲ႕အတူ.... လိုအပ္ေသာကုဒ္ေတြကို ေလ့လာ လိုက္ပါ

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

]]></b:skin>   သည္ကုဒ္ကိုရွာလိုက္ပါ..

 ေတြ႕ျပီဆိုတာနဲ႕ သူ႕အေပၚကကပ္ျပီး  ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကိုထည့္လိုက္ပါ။

မွတ္ခ်က္  ။   ။  ကုဒ္ရွာဖို႕ ခက္ခဲေနပါက  b:skin  ေလးကိုသာ ထည့္ရွာပါ
ေနာက္ ေဘးက မွ်ားေလးကို ေျဖပါ အန္တားတခ်က္ေခါက္ပါ လိုျခင္ေသာကုဒ္ ေတြ႕ပါမယ္

.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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2LsdrgLjL019xkGwDjGnDeps20wsAeoDlXiraHWGCfy4smPiqsbRvcNzz_cxIZOxDbb4BrIDBYvYEdhKAHXijGbO4kS_ak5ypCFmRvwsMiq0bULgeT43sfUanI2x7051wFErZQdgWus/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)); }

ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို ေဆ့လို႕ရပါျပီေနာ္.... ေအာက္မွာ သုံးရမည့္ကုဒ္ေတြပါ....

Big Buttons :

<a href="LINK HERE" class="button big blue">TEXT HERE</a><a href="LINK HERE" class="button big green">TEXT HERE</a><a href="LINK HERE" class="button big orange">TEXT HERE</a><a href="LINK HERE" class="button big gray">TEXT HERE</a>

 Medium Buttons :

<a href="LINK HERE" class="button medium blue">TEXT HERE</a>
<a href="LINK HERE" class="button medium green">TEXT HERE</a>
<a href="LINK HERE" class="button medium orange">TEXT HERE</a>
<a href="LINK HERE" class="button medium gray">TEXT HERE</a>

 Small Buttons :

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

Small Rounded Buttons :

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

   မွတ္ခ်က္    ။     ။     LINK HERE    ေနာမွာ မိိမိတို႕ ညႊန္ေသာလင့္ ထည့္ပါ။

TEXT HERE      ေနရာမွာ မိမိတို႕ ေရးလိုေသာ စာသားကိုေရးပါ။

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 

***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

Read More

Button စတိုင္လွလွေလးေတြ သုံးမယ္ဆိုရင္ ( Blogger Only )

 

 ကဲဗ်ာ   မိမိတို႕ေဘလာ့မွာ   ခုလို လွပေသသပ္တဲ့   Button  လွလွေလးေတြကို သုံးလိုပါက...နည္းလမ္းေလးကိုမွ်ေ၀ခံစားလုိက္ပါျပီေနာ္... လုပ္နည္းနဲ႕  လိုအပ္တဲ့ ကုဒ္ေတြကို ေအာက္မွာ ေလ့လာလိုက္ပါေနာ္.....

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

]]></b:skin>    ဆိုတာကိုရွာလိုက္ပါ...တကယ္လို႕မေတြ႕ခဲ့ရင္  b:skin   ကိုရွာပါ

ဘာလို႕လဲဆိုောတ့ တခ်ိဳ႕ကုဒ္ေတြကို  စာတိုင္မွာ မွ်ားအမည္းေလးနဲ႕  ေခါက္ထားတတ္လို႕ပါ... က်ေနာ္ လက္ေတြ႕ရွာ ၾကည့္တာေတာ့   ]]></b:skin> 

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

/* Exciting Round Buttons By YOURPCGENIE.NET*/ .excitinground{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; } .excitinground a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } .excitinground a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); } .excitinground a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); } .excitinground a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); } .excitinground a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); } .excitinground a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); } .excitinground a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); } .excitinground a:hover, .excitinground:hover { color: #fff; opacity: .7 }

   ကဲ  မိမိတို႕အသုံးလိုတိုင္း  လိုအပ္တဲ့ ကာလာနဲ႕ လိုအပ္သလို ေအာက္မွာ ယူသုံးနိဳင္ၾကပါျပီေနာ္။

<span class="excitinground"><a class="red" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="orange" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="green" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="blue" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="gray" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="dark" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

  မွတ္ခ်က္   ။     ။ http://www.aungsanmks.com/ ေနရာမွာ မိမိတို႕ လင့္အစားထိုးပါ

                       YOUR TEXT  ေနရာမွာ button  ေပၚတင္လိုေသာ စာသားေရးပါ။

အဆက္ေျပၾကပါေစလို႕ ဆုေတာင္းရင္း   ေလးစားစြာျဖင့္

လာလည္နိဳင္ေသာ က်ေနာ့္ေနရာေလးမ်ား ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

Read More

Button Hover Style လွလွေလးဖန္တီးၾကစို႕

လယ္တီေျမသား


 

ေဆာ့၀ဲလ္ျမိဳ႕ေတာ္



ကဲသည္လို Button Hover ေလးေတြနဲ႕ ေရးၾကမယ္ဆိုရင္ နည္းလမ္းေလးကို မွ်ေ၀လုိက္ရပါတယ္...လုပ္နည္းေလးကလဲ လြယ္ကူပါတယ္... ပထမဆုံးေအနနဲ႕..

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ..
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
             ]]></b:skin>   ကုဒ္ေလးကိုရွာလိုက္ပါေနာ္...ေတြ႕ျပီဆိုတာနဲ႕
သူ႕အေပၚမွာ ကပ္လွ်က္  ေအာက္ကဇယားထဲကကုဒ္ေတြကို ထည့္ေပးလုိက္ပါ။
 

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnhcrhenkM0Dc5T9imtXNblnv3gvn2ZNhprjeRZS0FzmLZwf6JvELONLz9S3fj5F5swYE02rftH6KzszvVUeYEkt6hf3ERS_Y-J35CJEavh0aIhbfwcTArpgmgj8cNHuPFIQ3HnJBFe4/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

အိုေကျပီးးတာနဲ႕ save template လု္ပလိုက္ပါေတာ့... ကဲစမယ္ေနာ္..
Button လွလွေလးေတြနဲ႕ လင့္ညႊန္ဖို႕...ေအာက္ကကုဒ္ေလးကိုဘဲ သုံးလုိက္ပါ..

<a href="လင့္ကိုသည္မွာထည့္ပါ" class="hb-buttons">အမည္ထည့္ပါ</a>

အသုံးျပဳနည္း  ။     ။

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


အဆင္ေျပပါတယ္..
အဆင္ေျပမယ္လို႕႔ ေမွ်ာ္လင့္ပါတယ္ေနာ္...
အခက္ခဲရွိပါက c-box မွာေအာ္ခဲ့ၾကပါ..
ေအာင္ေအာင္ိ(မကစ)

Read More

လင့္ေတြကို Rollover Button ေလးနဲ႕သုံးျခင္ရင္

သည္နည္းေလးေကတာ့ မိမိတို႕ဘေလာ့လင့္ေတြကို  ပုံစံဒီဇိုင္းေလးတစ္မ်ိဳးနဲ႕ ေရးနည္းပါ...
ဒါေလးကေတာ့ ပို႕စ္စာမ်က္ႏွာမွာ  ေရးနိဳင္သလို  ဆိုဒ္ဘား Java/Script မွာလဲ အသုံးျပဳနိဳင္ပါတယ္.. အဆင္ေျပတဲ့နည္းလမ္းေလးတစ္ခုပါ..ပုံမွာ ျပထားသလို ကြ်န္ေတာ့ဆိုဒ္မွာ ေရးထားတာေလးေတြပါ... Layout ကေန  Html/Javascript ကိုထည့္ထားတဲ့ အေပၚပုံပါ.. ဘယ္ကိုဘဲ လင့္ညႊန္ပါေစ သူ႕ဇယားေလးနဲ႕သူ လွလွပပ ေသသပ္ေနတာ ၾကည့္ေကာင္းတာေပါ့...

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

အသုံးျပဳရန္ကုဒ္.....

<form action="http://www.ledimye.blogspot.com/" target="_blank" method="GET">
<input type="submit" value="လယ္တီေျမသားမွၾကိဳဆိုပါ၏">
</form>

သည္လိုေလး ေတြ႕ရပါ့မယ္... အနီေရာင္နဲ႕ လင့္ေနရာ စာသားေနရာမွာ လိုူအပ္သလို ေျပာင္းလဲ သုံးနိဳင္ပါတယ္...

လာလည္ပါေနာ္ ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

Read More