រៀនបង្កប់ Google Web Fonts នៅក្នុងប្លកករ
ដោយសារមើលឃើញពីតម្រូវការរបស់បងប្អូនខ្មែរ
ដែលជាម្ចាស់ប្លកទាំងឡាយមានចម្ងល់ទៅលើការប្រើប្រាស់ពុម្ព
អក្សរខ្មែរជាម៉ូតផ្សេងៗ តែមិនទាន់ចេះដាក់។
ជាដំបូងខ្ញុំសូមណែនាំ
លោកអ្នកឲ្យស្គាល់សិនថា តើយើងដាក់ Google Web Fonts នេះក្នុងគោលបំណងអ្វី? ការដាក់ Google Web Fonts នេះគឺយើងចង់ឲ្យប្លករបស់យើងបង្ហាញជាម៉ូតអក្សរផ្សេងៗដែលមាននៅ ក្នុង Google Web Fonts (មានប្រហែលម្ភៃម៉ូត) ដែលយើងអាចដាក់បានតាមតម្រូវការ។ ជាពិសេសការដាក់ Google Web Fonts អាចធ្វើឲ្យអ្នកទស្សនាមានការចាប់អារម្មណ៍ គឺស្អាត ហើយទោះបីជាកុំព្យូទ័ររបស់គេគ្មានពុម្ពអក្សរប្រភេទនោះក៏ដោយ ក៏គេអាចមើលម៉ូតអក្សរនោះបានដែរ។ លោកអ្នកមិនត្រឹមតែអាចដាក់បានតែមួយប្រភេទក្នុងប្លកមួយនោះទេ គឺអាចដាក់បានគ្រប់ទាំងអស់ តែចាំខ្ញុំបង្ហាញនៅអត្ថបទក្រោយទៀត។ ឥឡូវនេះខ្ញុំសូមបង្ហាញជូនជាឧទាហរណ៍ជាក់ស្ដែងតែម្តង ព្រោះថាបើនិយាយសើរៗ ច្បាស់ជាមិនយល់ទេ។ ដូចនេះសូមលោកអ្នកអនុវត្តជាក់ស្តែងជាមួយខ្ញុំតែម្តងទៅ ៖
៙ ជំហានទី១ (ការយកកូដចេញពី Google Web Font) ៖
- ចំណុចផ្តើមសូមចូលទៅកាន់គេហទំព័រ Google Web Fonts ។
- ជ្រើសរើសភាសានៅត្រង់ Latin >> Khmer (មើលរូបភាព)
- ឥឡូវនេះខ្ញុំសូមជ្រើសរើសយកពុម្ពអក្សរមួយដែលមានឈ្មោះថា Preahvihear ទៅដាក់ក្នុងមីនុយ។
- យើងត្រូវចុចពាក្យថា "Add to Collection" (មើលរូប)
- បន្ទាប់មកសូមចុចពាក្យ "Use"
- រមូរចុះក្រោមដើម្បីយកកូដនៅត្រង់ "3. Add this code to your website:"
- ចម្លងកូដនៅក្នុងប្រអប់នោះទាំងអស់ (សូមមើល)
៙ ដល់ពេលត្រូវបិទភ្ជាប់ក្នុងប្លក់របស់អ្នកវិញម្តងហើយ ៖
- Login ចូលគណនី Blogger >> Template >> Edit Template
- ស្វែងរកកូដដែលមានឈ្មោះថា <head> ហើយបិទភ្ជាប់កូដដែលអ្នកបានចម្លងពី Google Web Fonts អំបាញ់មិញនេះនៅពីខាងក្រោមកូដ <head> (មើលរូបដើម្បីងាយយល់)
*** នៅពេលបិទភ្ជាប់កូដសូមកុំភ្លេចសរសេរសញ្ញា / នេះថែម នៅជិតចុងក្រោយ ៖
>> សូមមើល :
៙ កូដទាំងស្រុង ៖
៙ កូដដែលសរសេរថែម ៖
- ចូលទៅកាន់ Google Web fonts វិញ។ សូមរមូរចុះក្រោមទៀតនោះលោកអ្នកនឹងឃើញនៅត្រង់ "4. Integrate the fonts into your CSS:"
- សូមចម្លងកូដនោះទៀត ដើម្បីយកទៅដាក់ក្នុង Template ប្លក់យើងទៀត។
- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា
- សូមរកកូដ ៖
/* Tabs
----------------------------------------------- */
- សូមមើលកូដទាំងឡាយដែលឋិតនៅក្រោមកូដ ៖
/* Tabs
----------------------------------------------- */
- បិទភ្ជាប់កូដដែលបានចម្លងមិញនេះនៅបន្តពីកូដដើមផស់គេ (មើលរូបបានយល់)
- ធ្វើរួចរាល់សូម Save Template របស់អ្នក ហើយ View វាមើលនោះនឹងឃើញលទ្ធផល :)
លោកអ្នកឲ្យស្គាល់សិនថា តើយើងដាក់ Google Web Fonts នេះក្នុងគោលបំណងអ្វី? ការដាក់ Google Web Fonts នេះគឺយើងចង់ឲ្យប្លករបស់យើងបង្ហាញជាម៉ូតអក្សរផ្សេងៗដែលមាននៅ ក្នុង Google Web Fonts (មានប្រហែលម្ភៃម៉ូត) ដែលយើងអាចដាក់បានតាមតម្រូវការ។ ជាពិសេសការដាក់ Google Web Fonts អាចធ្វើឲ្យអ្នកទស្សនាមានការចាប់អារម្មណ៍ គឺស្អាត ហើយទោះបីជាកុំព្យូទ័ររបស់គេគ្មានពុម្ពអក្សរប្រភេទនោះក៏ដោយ ក៏គេអាចមើលម៉ូតអក្សរនោះបានដែរ។ លោកអ្នកមិនត្រឹមតែអាចដាក់បានតែមួយប្រភេទក្នុងប្លកមួយនោះទេ គឺអាចដាក់បានគ្រប់ទាំងអស់ តែចាំខ្ញុំបង្ហាញនៅអត្ថបទក្រោយទៀត។ ឥឡូវនេះខ្ញុំសូមបង្ហាញជូនជាឧទាហរណ៍ជាក់ស្ដែងតែម្តង ព្រោះថាបើនិយាយសើរៗ ច្បាស់ជាមិនយល់ទេ។ ដូចនេះសូមលោកអ្នកអនុវត្តជាក់ស្តែងជាមួយខ្ញុំតែម្តងទៅ ៖
៙ ជំហានទី១ (ការយកកូដចេញពី Google Web Font) ៖
- ចំណុចផ្តើមសូមចូលទៅកាន់គេហទំព័រ Google Web Fonts ។
- ជ្រើសរើសភាសានៅត្រង់ Latin >> Khmer (មើលរូបភាព)
- ឥឡូវនេះខ្ញុំសូមជ្រើសរើសយកពុម្ពអក្សរមួយដែលមានឈ្មោះថា Preahvihear ទៅដាក់ក្នុងមីនុយ។
- យើងត្រូវចុចពាក្យថា "Add to Collection" (មើលរូប)
- បន្ទាប់មកសូមចុចពាក្យ "Use"
- រមូរចុះក្រោមដើម្បីយកកូដនៅត្រង់ "3. Add this code to your website:"
- ចម្លងកូដនៅក្នុងប្រអប់នោះទាំងអស់ (សូមមើល)
៙ ដល់ពេលត្រូវបិទភ្ជាប់ក្នុងប្លក់របស់អ្នកវិញម្តងហើយ ៖
- Login ចូលគណនី Blogger >> Template >> Edit Template
- ស្វែងរកកូដដែលមានឈ្មោះថា <head> ហើយបិទភ្ជាប់កូដដែលអ្នកបានចម្លងពី Google Web Fonts អំបាញ់មិញនេះនៅពីខាងក្រោមកូដ <head> (មើលរូបដើម្បីងាយយល់)
*** នៅពេលបិទភ្ជាប់កូដសូមកុំភ្លេចសរសេរសញ្ញា / នេះថែម នៅជិតចុងក្រោយ ៖
>> សូមមើល :
៙ កូដទាំងស្រុង ៖
<link href='http://fonts.googleapis.com/css?family=Preahvihear' rel='stylesheet' type='text/css'>
៙ កូដដែលសរសេរថែម ៖
<link href='http://fonts.googleapis.com/css?family=Preahvihear' rel='stylesheet' type='text/css'/>
- ចូលទៅកាន់ Google Web fonts វិញ។ សូមរមូរចុះក្រោមទៀតនោះលោកអ្នកនឹងឃើញនៅត្រង់ "4. Integrate the fonts into your CSS:"
- សូមចម្លងកូដនោះទៀត ដើម្បីយកទៅដាក់ក្នុង Template ប្លក់យើងទៀត។
- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា
- សូមរកកូដ ៖
/* Tabs
----------------------------------------------- */
- សូមមើលកូដទាំងឡាយដែលឋិតនៅក្រោមកូដ ៖
/* Tabs
----------------------------------------------- */
- បិទភ្ជាប់កូដដែលបានចម្លងមិញនេះនៅបន្តពីកូដដើមផស់គេ (មើលរូបបានយល់)
- ធ្វើរួចរាល់សូម Save Template របស់អ្នក ហើយ View វាមើលនោះនឹងឃើញលទ្ធផល :)
Post a Comment