October 31, 2018

បង្កើត​ប្រអប់​សម្រាប់​ដាក់​​កូដ​ងាយៗ / Code box for blogger


ក្នុង​គន្លឹះ​នេះ​ខ្ញុំ​បាន​បង្ហាញ​អំពី​ការ​បង្កើត​ប្រអប់​សម្រាប់​ដាក់ ​code នានា ពេល​យើង​ចង់​សរសេរ​អត្ថបទ​អំពី​ការ​ប្រើប្រាស់​កូដ​ផ្សេងៗ  ដើម្បី​ឲ្យ​វា​មាន​របៀប បង្ហាញ​ទៅ​មិន​រញ៉េរញ៉ៃ​​អត្ថបទ​របស់​យើង​ឡើយ ។ ប្រអប់​កូដ​នេះ​ខ្ញុំ​បាន​យក​មក​ពី​គេ​ក្នុង​អ៊ីនធឺណិត ដោយ​មាន​កែ​សម្រួល​ឲ្យ​វា​មាន​គែម​រាង​មូល​ 20px និង​ផ្ទៃ​ខាង​ក្រោយ​ទៅ​ពណ៌​រាង​ងងឹត (#232323) ។ សូម​មើល​រៀប​ដាក់ និង​ប្រើប្រាស់​តាម​ខាង​ក្រោម​នេះ ៖

១- ចូល​ទៅ​ក្នុង​​ Blog របស់​លោក​អ្នក​ជា​មុន​សិន
២- ចូល​ទៅ​ម៉ឺនុយ Theme >> Edit HTML

៣- ចុច​ម៉ៅ​លើ​កូដ​សិន រួច​ចុច​ក្ដារចុច Ctrl +F ដើម្បី បើក​មុខងារ​​ស្វែង​រក​កូដ​ក្នុង template
៤- ស្វែងរក​ពាក្យ ]]></b:skin>
៥- ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​​បិទភ្ជាប់ ឬ​ដាក់​ពី​លើ​កូដ ]]></b:skin> (សូម​មើល​រូប)

ផ្ទៃ​ពណ៌​ខ្មៅ
/*=========Code Box AKbalthom===========*/
.code { background:#232323; background-repeat:no-repeat; border-radius: 20px; color: #ffffff; font-size: 14px; line-height: 18px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 20px; width: 98%; } .code:hover { background: #232323; background-repeat:no-repeat;box-shadow: 0 0 5px rgba(0, 0, 0, 0.57);}

ផ្ទៃ​ពណ៌​ប្រផេះ
/*=========Code Box AKbalthom===========*/
.code { background:#f7f7f7; background-repeat:no-repeat; border-radius: 10px; border: 1px solid #f1f1f1 !important; font-size: 15px; line-height: 18px; margin: 10px 0 10px 10px; max-height: auto; min-height: 16px; overflow: auto; padding: 20px; width: 100%; } .code:hover { background: #f7f7f7; background-repeat:no-repeat;box-shadow: 0 0 5px rgba(0, 0, 0, 0.57);}

៦- រួច​ចុច Save Theme ។

៙​ របៀប​ប្រើ ៖
១- ចូល​ទៅ​បង្កើត​អត្ថបទ​ថ្មី​មួយ
២- ចម្លង​កូដ​ខាង​ក្រោម
<div class="code">
Paste Code Here
</div>
៣- យក​ទៅ​ដាក់​ក្នុង​អត្ថបទ​ដោយ​ឈរ​លើ​តាប HTML ។
៤- ចម្លង​កូដ​​របស់​អ្នក​​ដែល​ត្រូវ​ដាក់ post យក​ទៅ​ដាក់​​កន្លែង Paste Code Here ជា​ការ​ស្រេច ។
៥- ​យើង​អាច​ចុច​ប៊ូតុង Preview ដើម្បី​មើល​លទ្ធផល​សាកល្បង​បាន ៕

Post a Comment

Whatsapp Button works on Mobile Device only

វាយតែមួយពាក្យដែលអ្នកចង់ស្វែងរក