របៀបបង្កើតតារាង សម្រាប់ដាក់ Code ឬ ពាក្យសំខាន់

បាទថ្ងៃនេះខ្ញុំនឹងលើកយកពីវិធីសាស្រ្ត បង្កើតទម្រង់ ឬ តារាង សម្រាប់បង្ហាញ កូដ ឬ ពាក្យសំខាន់ណាមួយ ដែរចង់បង្ហាញដល់អ្នកមើលនៅក្នុង ប្លុករបស់អ្នក។ ជាថ្មីនេះ ខ្ញុំខានចូលមកសរសេរប្លុក យូរណាស់មកហើយ ខ្ញុំនឹងយកអ្វីដែលខ្ញុំដឹង ទាំងអស់មក បង្ហាញដល់អ្នក។ វាមិនពិបាកទេ សម្រាប់អ្នកដែលចង់ឃើញ ម៉ូដ ថ្មីៗ។ សម្រាប់អ្នកដែលចេះ ហើយ ក៏មិនថ្វី ដែរ ព្រោះគន្ហឹះទាំងអស់ គឺសម្រាប់ ប្អូនៗ ជំនាន់ក្រោយ ទុកមើល និង សម្រាប់យកទៅរៀនបន្ថែម ។ ពីព្រោះខ្ញុំមិនមែនជាអ្នក រៀនសរសេរ គេហទំព័រ អ្វី នោះទេ គឺគ្រាន់តែ ចង់បង្ហាគគន្លឹះ តូចៗ ទាំងនេះ​សម្រាប់ ប្រិយមិត្ត ដែល មាន ចម្ងល់ ខាងការសរសេរ អត្ថបទ នៅលើ Blog ។ វាមិនខុសអ្វី ទៅនិង MsWord គ្រាន់តែយើងត្រូវការ ដឹង នៅ Syntax មួយចំនួនតែប៉ុណ្ណោះ។ ជាពិសេស​ នោះ គឺ CSS ឬ Style សម្រាប់ HTML ។ល។ 

ឧទាហរណ៍កូដ ខាងក្រោមមួយនេះ

Update message

យើង​ខ្ញុំ​មិន​ដាក់​កញ្ចប់​ពុម្ព​អក្សរ​ខ្មែរ​យូនីកូដ​ដែល​អាច​ចុច​ទាញ​យក​ម្ដង​ទាំងអស់​នោះ​ទេ! បើ​លោកអ្នក​ត្រូវការ​ប្រើ​ពុម្ព​អក្សរ​របស់​អ្នក​រចនា​ណា​ម្នាក់​សូម​ទាញ​យក​ទៅ​តាម​ឈ្មោះ​អ្នក​រចនា​នោះ​ចុះ។ ខាង​យើងខ្ញុំ​​ចង់​ឲ្យ​អ្នក​ប្រើប្រាស់​បាន​ស្គាល់​អ្នក​រចនា​ឲ្យ​បាន​ច្រើន​ទៅ​តាម​លទ្ធភាព មិនមែន​គ្រាន់តែ​ចុច​ទាញ​យក​ហើយ​ប្រើប្រាស់​នោះ​ទេ។

ចម្លងកូដខាងក្រោម ទៅដាក់នៅក្នុង HTML របស់អ្នកជាការស្រេច កន្លែង​ Post > HTML

Code CSS

<div class="shrt shrt-update shrt-message" icon="info-circle" style="background-color: #017cb9; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-sizing: border-box; color: white; font-family: Hanuman, Roboto, sans-serif; font-size: 16px; margin-bottom: 15px; padding: 10px; position: relative;" title="Update message">
<div class="message-wrapper" style="box-sizing: border-box; position: relative;">
<div class="headline" style="background-color: rgba(67, 219, 37, 0.3); box-sizing: border-box; margin: -10px -10px 10px; padding: 8px 10px; position: relative;">
<b>Update message</b></div>
<div style="text-align: justify;">
យើង​ខ្ញុំ​មិន​ដាក់​កញ្ចប់​ពុម្ព​អក្សរ​ខ្មែរ​យូនីកូដ​ដែល​អាច​ចុច​ទាញ​យក​ម្ដង​ទាំងអស់​នោះ​ទេ! បើ​លោកអ្នក​ត្រូវការ​ប្រើ​ពុម្ព​អក្សរ​របស់​អ្នក​រចនា​ណា​ម្នាក់​សូម​ទាញ​យក​ទៅ​តាម​ឈ្មោះ​អ្នក​រចនា​នោះ​ចុះ។ ខាង​យើងខ្ញុំ​​ចង់​ឲ្យ​អ្នក​ប្រើប្រាស់​បាន​ស្គាល់​អ្នក​រចនា​ឲ្យ​បាន​ច្រើន​ទៅ​តាម​លទ្ធភាព មិនមែន​គ្រាន់តែ​ចុច​ទាញ​យក​ហើយ​ប្រើប្រាស់​នោះ​ទេ។</div>
</div>
</div>

Style 2

គាំទ្ររូបខ្ញុំបាទ ដើម្បីបន្តពុម្ពអក្សរថ្មីៗជាច្រើនទៀត
សូមទាញយកតាមរយៈលេខ 015868608
ថវិការដែលបានមក យកទៅចំណាយ លើថ្លៃសម្ភារៈ និង ទឹកភ្លើង
ទាញយក / Download

Copy Code 2

<div style="background: #950054; border-radius: 10px; border: 0px solid #f30; color: #f9f9f9; font-family: &quot;koulen&quot; , &quot;anton&quot;; font-size: 18px; height: auto; margin-top: 15px; overflow: auto; padding: 10px;">
<i aria-hidden="true" class="fa fa-heart faa-shake animated"></i> គាំទ្ររូបខ្ញុំបាទ ដើម្បីបន្តពុម្ពអក្សរថ្មីៗជាច្រើនទៀត <br />
<i aria-hidden="true" class="fa fa-phone faa-wrench animated"></i> សូមទាញយកតាមរយៈលេខ 015868608 <br />
<i aria-hidden="true" class="fas fa-dollar-sign faa-flash animated faa-fast fa-lg"></i> ថវិការដែលបានមក យកទៅចំណាយ លើថ្លៃសម្ភារៈ និង ទឹកភ្លើង<br />
<i aria-hidden="true" class="fas fa-download faa-falling animated faa-fast"></i> <a href="https://docs.google.com/uc?id=1yXtkKYSVSA-xlgy1pbLXM5HVUD-iNQG4&amp;amp;export=download" target="_blank">ទាញយក / Download</a> </div>

Style 3

រក្សាសិទ្ធិ© ដោយ អាស្វាដែក, ២០១៣. រក្សាសិទ្ធិ​គ្រប់យ៉ាង.
តំបន់​បណ្ដាញ : www.asvadek.blogspot.com
សារ​អេឡិចត្រូនិក : info.asvadek@gmail.com
ទូរស័ព្ទ​ : +855 60 629 797 / 015 868 608 (Cambodia)

Copy code 3

<div style="background-image: url(https://3.bp.blogspot.com/-_qtSOwpkr1Y/Wzdr03d_HSI/AAAAAAAABS8/jsnenRBw7fYtdb6Ej7R1DI3KcTXFj9fKwCLcBGAs/s1600/anime-background-images-1.jpg); border-radius: 25px; border: 3px solid #000; color: white; height: auto; margin: 10px; overflow: auto; padding: 20px;">
រក្សាសិទ្ធិ© ដោយ អាស្វាដែក, ២០១៣. រក្សាសិទ្ធិ​គ្រប់យ៉ាង.<br>
តំបន់​បណ្ដាញ : <a class="vglnk" href="http://www.asvadek.blogspot.com/" rel="nofollow">www.asvadek.blogspot.com</a><br>
សារ​អេឡិចត្រូនិក : info.asvadek@gmail.com<br>
ទូរស័ព្ទ​ : +855 60 629 797 / 015 868 608<b> (Cambodia)</b></div>

បាទជាចុងក្រោយវាគ្មានអ្វីពិបាក ទេ គឺគ្រាន់តែយើង ចេះប្រើ CSS ឬ Style ដូរបែបបទវាទៅ វានឹងមានសម្រស់កាន់តែស្អាត។ ជាពិសេស គឺចេះ ប្រើ Element នៅក្នុង Browser កាន់តែប្រសើរ។
ប្រហែលជាអត្ថបទក្រោយ ខ្ញុំនឹងប្រាប់ពីរបៀបប្រើ​។

អត្ថបទដោយ អាស្វាដែក