របៀប​ដាក់ Button ដែល​មាន​ទ្រង់ទ្រាយ​ដូច Google ក្នុង​ប្លក

 ប្រភពៈ អាក្បាលធំ

រូបភាព​គំរូ button

   កាលពី​លើក​មុន​ប្លក​អាក្បាលធំ​ធ្លាប់​បាន​ពាំនាំ​នូវ "កូដ​ឆ្នុច(button)​មាន​បួន​ពណ៌​និង​មាន​ចលនា​យ៉ាង​ស្រស់​ស្អាត" សម្រាប់​ដាក់​ក្នុង​អត្ថបទ ឥឡូវ​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ជូន​ឆ្នុច​មួយ​ទៀត​ដែល​មាន​រូបរាង​លំនាំ​ តាមឆ្នុចរបស់ Google វិញ ដែល​មាន​ពណ៌​ប្រផេះ​ខ្ចី​ ផើត​ឡើង​នៅ​ពេល​យក cursor ដាក់​ពី​លើ​វា។
ការ​ដាក់​ឆ្នុច​ចុច​ជំនួស​ឲ្យ​ការ​ដាក់​តំណ​អក្សរ​ ធ្វើឲ្យ​ប្លក​របស់​យើង​មើល​ទៅ​ទាក់ទាញ ដែល​​ធ្វើ​ឲ្យ​គេ​វាយតម្លៃ​បាន​ថា ម្ចាស់​ប្លក​មិនមែន​ដំឡូង​មូល​ទេ :D, សូម​មើល​ពី​របៀប​ដាក់​ខាងក្រោម​នេះ ៖

៙ របៀប​ដាក់​កូដ Button ដែល​មាន​ទ្រង់ទ្រាយ​ដូច Google ក្នុង​ Template ប្លក ៖

- កត់ត្រា​ចូល (Log In) ចូល​គណនី Blogger របស់​លោក​អ្នក។
- លោកអ្នក​​គួរ​តែ បម្រុង​ទុក Template ប្លក​លោក​អ្នក​សិន​ បង្ការ​ក្រែងលោ​​ដាក់​កូដ​ខុស​។
- ចូល​ទៅ Template >> Edit HTML >> Proceed (សូម​មើល​រូប​ខាង​ក្រោម)

- ស្វែង​រក​ពាក្យ​​​ថា  ]]></b:skin>  (បើ​​​ចង់​លឿន​សូម​ចុច Ctrl+F រួច​វាយ​ពាក្យ​ស្វែងរក​ក្នុង​ប្រអប់​ស្វែងរក​របស់ template Editor)។
- ចម្លង​កូដ button ​ខាង​ក្រោម​យក​ទៅ​បិទភ្ជាប់ ពី​លើ​ពាក្យ ]]></b:skin> រួច​ចុច​ឆ្នុច Save temblate ដើម្បី​ចងចាំ។ (សូម​មើល​រូប​ខាង​ក្រោម)

កូដ Button ដែល​មាន​ទ្រង់ទ្រាយ​ដូច Google

button.ui-button{-webkit-border-radius:2px;-webkit-box-align:stretch;-webkit-box-sizing:content-box;-webkit-transition:all .2s;-webkit-user-select:none;background: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#F1F1F1));border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:content-box;color:#222;cursor:pointer;font-size:11px;font-weight:700;height:27px;line-height:26px;margin:0;padding:0 10px;position:relative;text-align:center;vertical-align:middle}button.ui-button:hover{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);-webkit-transition:all 0;background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#222;text-decoration:none}

៙ របៀប​ប្រើ​ក្នុង​អត្ថបទ ៖

- ចូល​ទៅ​ក្នុង​ប្លក​របស់​លោកអ្នក រួច​សាក​បើ​កសរសេរ​អត្ថបទ​ថ្មី​មួយ។
- ដោយ​ឈរ​លើ HTML Edit តាប ចម្លង​ទម្រង់​កូដ​ ដែល​មានទម្រង់ ៖

<button class="ui-button"><a href="http://www.example.com" target="_blank">This is a button</a></button>

យើង​ត្រូវ​ដូរ​នៅ​ត្រង់ ៖

- href="http://www.example.com" : ដូរ​អក្សរ​ពណ៌បៃតង​​​ទៅ​ជា​​តំណ​របស់ button ។
- target="_blank">This is a button</a> : ដូរ​អក្សរ​ពណ៌បៃតង​​ទៅ​ជា​ពាក្យ​ផ្សេងៗ ឧទាហរណ៍ : ទាញ​យក, Download ជាដើម។ (សូម​មើល​រូប​ខាងក្រោម)