តាម​ធម្មតា​យើង​តែងតែ​បង្កើត​រូបភាព​ JPG, PNG ឬ​រូបភាព​ចលនា GIF ដើម្បី​សរសេរ​ជា​ដំណឹង​ផ្សព្វផ្សាយ​អំពី​អ្វីមួយ​នៅ​ចំហៀង​ប្លក់​របស់​យើង ដែល​ការ​សរសេរ​បែប​នេះ​វា​មិន​រីក​រួម​ទទឹង​រូបភាព​និង​កំពស់​រូបភាព​តាម​ការ​ប្រែប្រួល​ទីតាំង​នោះ​ទេ ។ ដូច្នេះ​យើង​ត្រូវ​ដាក់​កូដ​ជា​ប្រភេទ card ដែល​រីក​រួម​តាម​ទីតាំង​ដាក់ ដែល​ក្នុង​គន្លឹះ​នេះ​ខ្ញុំ​លើក​បង្ហាញ​កូដ CSS ជា​លក្ខណៈ​កាត​មាន​អក្សរ​មាន​ប៊ូតុង​និង​មាន logo របស់ telegram សម្រាប់​​ម្ចាស់​ប្លក់​ដែល​មាន​ក្រុម​នៅ​ telegram ងាយស្រួល​អ្នក​ចូល​អាន​ចុច​ចូល​ទៅ telegram ។

៙ របៀប​ដាក់​កូដ​ពុម្ព​ Font Awesome ចូល template Blogger ៖

- ចូល​គណនី blogger.com របស់​លោកអ្នក ។ - ដាក់​កូដ​ពុម្ព​អក្សរ Font Awesome ​ចូល blogger (បើ​ប្លក់​របស់​អ្នក​មាន​ហើយ​មិន​បាច់​ដាក់​ទៀត​ទេ។
- ចូល​ទៅ​កាន់ Theme >> ចុច​សញ្ញា​ព្រួញ​ក្បែរ​ពាក្យ CUSTOMIZE ​ហើយ​យក​ពាក្យ Edit HTML។
- ស្វែងរក​ស្លាក <head> ចម្លង​កូដ​ខាងក្រោម​យក​ទៅ​ដាក់​ពី​ក្រោម​ស្លាក ។
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css' rel='stylesheet'/>

៙ របៀប​ដាក់​កូដ​ចូល template Blogger ៖

1- ចូល​ទៅ Blogger.com ដើម្បី Login គណនី​របស់​លោកអ្នក
2- ចូល​ទៅ​កាន់ Theme >> ចុច​សញ្ញា​ព្រួញ​ក្បែរ​ពាក្យ CUSTOMIZE ​ហើយ​យក​ពាក្យ Edit HTML
3- ស្វែងរក​ស្លាក ]]></b:skin> ហើយ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​ដាក់​ខាង​លើស្លាក​នោះ រួច​ចុច Save template ។ 
.telegram-wrap{display:flex;align-items:center;justify-content:space-between;background-color:#0088CC ;padding:15px;border-radius:8px}
.telegram-left{padding:0 15px 0 0}
.telegram-description{display:block;font-size:13px;font-weight:400;color:#fff;line-height:1.5em;text-transform:capitalize}
.telegram-button{display:block;margin:10px 0 0}
.telegram-button a.tele-link{display:inline-block;text-align:center;padding:7px 13px;font-size:14px;font-weight:700;background-color:#fff;color:#0088cc;border-radius:50px}
.telegram-button a.tele-link:hover{color:#2AABEE}
.telegram-right .tele-icon{display:flex;align-items:center;justify-content:center;width:55px;height:55px;border:2px solid #fff;border-radius:100%;background-color:#2AABEE}
.telegram-right .tele-icon:before{content:'\f3fe';font-family:'Font Awesome 5 Brands';font-size:32px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.5)}

៙ របៀប​ដាក់​កូដ​ចូល Right Sidebar ឬ​ដាក់​ក្នុង​អត្ថបទ​ក៏​បាន ៖

- ចូល​ទៅ​កាន់​តាប Layout >> ចុច​បង្កើត Add a Gadget (នៅ​ផ្នែក របាយ​ស្ដាំ / right sidebar) ឬ​នៅ​ផ្នែក​ណា​ដែល​អ្នក​ចង់​ដាក់ gadget ។
- ជ្រើស​យក gadget ឈ្មោះ HTML/Javascript ហើយ​បិទភ្ជាប់​កូដ​ខាង​ក្រោម​ចូល ។
 <div class="telegram-wrap">
  <div class="telegram-left">
    <span class="telegram-description">ទំនាក់ទំនង​ទិញ​ពុម្ព​អក្សរ​ <b>អាក្បាលធំ</b> តាម telegram 069 556 887 (Samnang Nouv) តែ​មួយ​គត់ !</span>
    <span class="telegram-button"><a class="tele-link" href="https://t.me/AKbalthom" target="_blank">ទំនាក់ទំនងទិញ</a></span>
  </div>
របៀប​កែប្រែ ៖
  • កែប្រែ​ពាក្យ​នៅ​ចន្លោះ​កូដ <span class="telegram-description"> ........ </span>
  • កែប្រែ​តំណ​ប៊ូតុង https://t.me/AKbalthom
  • កែប្រែ​ពាក្យ​ប៊ូតុង ទំនាក់ទំនងទិញ
របៀប​ដាក់​កូដ Telegram Card Widget ខាង​លើ​គឺ​យើង​ដាក់​កូដ​ចូល template តែ​បើ​មិន​ចង់​ដាក់​កូដ​ចូល template ទេ យើង​អាច​ដាក់​កូដ​ទាំងអស់​ចូល gadget បាន​ដោយ​បន្ថែម <style> ទៅ​ឲ្យ CSS ដូច​ទម្រង់​ខាង​ក្រោម ៖
<div class="telegram-wrap">
  <div class="telegram-left">
    <span class="telegram-description">ទំនាក់ទំនង​ទិញ​ពុម្ព​អក្សរ​ <b>អាក្បាលធំ</b> តាម telegram 069 556 887 (Samnang Nouv) តែ​មួយ​គត់ !</span>
    <span class="telegram-button"><a class="tele-link" href="https://t.me/AKbalthom" target="_blank">ទំនាក់ទំនងទិញ</a></span>
  </div>
  <div class="telegram-right">
    <span class="tele-icon"></span>
  </div>
</div>

<style>
.telegram-wrap{display:flex;align-items:center;justify-content:space-between;background-color:#0088CC ;padding:15px;border-radius:8px}
.telegram-left{padding:0 15px 0 0}
.telegram-description{display:block;font-size:13px;font-weight:400;color:#fff;line-height:1.5em;text-transform:capitalize}
.telegram-button{display:block;margin:10px 0 0}
.telegram-button a.tele-link{display:inline-block;text-align:center;padding:7px 13px;font-size:14px;font-weight:700;background-color:#fff;color:#0088cc;border-radius:50px}
.telegram-button a.tele-link:hover{color:#2AABEE}
.telegram-right .tele-icon{display:flex;align-items:center;justify-content:center;width:55px;height:55px;border:2px solid #fff;border-radius:100%;background-color:#2AABEE}
.telegram-right .tele-icon:before{content:'\f3fe';font-family:'Font Awesome 5 Brands';font-size:32px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.5)}
</style>

ចប់​តែ​ត្រឹម​ប៉ុណ្ណេះ ជួប​គ្នា​នៅ​គន្លឹះ​ Blogger លើក​ក្រោយ​ទៀត៕