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

 

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

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

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

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

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

]]></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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-GMQte2S4lyWmp0t9BdQ2OqfsFvu0GQOnrWULx7hJob2Q_tIvbLcYedBVLMBF_BYHROwLm899Bhx1ZFDNP2UNrIsCZssgOjHUORhRt9vAc6XyeM7DoNGlThdzTsuxOCN344pQF-5Tnk/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 မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 

ဘေလာ့ခရီးသည္ 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com 

တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

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/AVvXsEiwi7pKIE6kodO7kRBUt6nlgvni9mbSgUhyphenhyphenu6uz4m23hoE2ZaumgkZOma4oZIHam-U1TdeSPFnP42VmM2AJvD5m5HO-MGrUMoF64ypPXd45Llsdd56hxERUghd7Nth9OXxQr4ulzLa_jqE/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.ledimyethar.com/" target="_blank" method="GET">
<input type="submit" value="လယ္တီေျမသားမွၾကိဳဆိုပါ၏">
</form>

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

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

www.aungsanmks.blogspot.com 

www.ledimyethar.com တို႕ရဲ႕ cbox မွာ ေျပာခဲ့ၾကပါေနာ္...

Read more »