កូដ kbd គ្រាប់ចុច​ដែល​មាន​រូបដៃ​ពេលដាក់លើ និង​មានចលនាពេលចុច សម្រាប់ Blogger

<kbd> គឺជា Element មួយនៅក្នុងភាសា HTML (HyperText Markup Language)។ វាត្រូវបានប្រើដើម្បីតំណាងឱ្យ ការបញ្ចូលដោយអ្នកប្រើប្រាស់ ជាពិសេសគឺ ការបញ្ចូលតាមរយៈក្តារចុច (keyboard input) ។ នៅពេលអ្នកឃើញ Tag <kbd> នៅក្នុងកូដ HTML ដូចជា <kbd>Ctrl</kbd> + <kbd>C</kbd> វាមានន័យថាអត្ថបទនៅចន្លោះ Tag ទាំងនោះ ("Ctrl" និង "C") គឺជាអ្វីដែលអ្នកប្រើប្រាស់គួរតែវាយបញ្ចូល ឬជាប៊ូតុងនៅលើក្តារចុចដែលត្រូវចុច។

តាមលំនាំដើម (default style) Browser ភាគច្រើននឹងបង្ហាញអត្ថបទនៅក្នុង Tag <kbd> ដោយប្រើ Font ដែលមានលក្ខណៈ monospace (ដែលអក្សរនីមួយៗមានទទឹងស្មើគ្នា)។ ប៉ុន្តែដូចដែលយើងបានពិភាក្សាកាលពីមុន គេតែងតែប្រើ CSS ដើម្បីកំណត់រចនាប័ទ្ម (style) ទៅលើ Element <kbd> នេះដើម្បីឱ្យវាមើលទៅដូចជាប៊ូតុងនៅលើក្តារចុចពិតៗ ដើម្បីឱ្យកាន់តែងាយស្រួលមើល និងយល់។

របៀប​ដាក់​ប្រើ​ជាមួយ Blogger ៖

ជំហានទី 1: ចូលគណនី Blogger របស់អ្នក ហើយចូលទៅកាន់ផ្ទាំងគ្រប់គ្រង Blogger (blogger dashboard) ។

ជំហានទី 2: នៅលើផ្ទាំងគ្រប់គ្រង Blogger ចុចលើ Template រួចចុច Edit HTML ។

ជំហានទី 3: ឥឡូវរកមើល </b:skin> ដោយចុច Ctrl+F (សម្រាប់ Windows) ឬ CMD+F (សម្រាប់ Mac) ។

ជំហានទី 4: ផាស (Paste) កូដ CSS ខាងក្រោមនៅពីលើ Tag </b:skin> រួចចុចប៊ូតុង Save template ។

កូដ CSS

/* 2025 : Script developed and shared by Celestial Samnang */
kbd{
	display: inline-block;
	color: #363636;
	text-decoration: none;
	text-align: center;
	background: #efefef;

	padding: 3px 7px;
	margin: 5px 3px;

	border-radius: 4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;

	-webkit-box-shadow: inset 0 0 25px #e8e8e8,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 2px 3px #333;
	-moz-box-shadow: inset 0 0 25px #e8e8e8,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 2px 3px #333;
	box-shadow: inset 0 0 25px #e8e8e8,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 2px 3px #333;
	text-shadow: 0 1px 0 #f6f6f6;

    /* Added for hover effect */
    cursor: pointer;
    /* Added for smooth transition */
    transition: all 0.1s ease-in-out;
}

/* Added for click/active effect */
kbd:active {
    box-shadow: inset 0 0 25px #e8e8e8; /* Keep only the inset shadow */
    transform: translateY(1px); /* Move slightly down */
    padding-top: 4px; /* Adjust padding to compensate for movement */
    padding-bottom: 2px; /* Adjust padding to compensate for movement */
}


.oft-kbd-sd {
  padding: 4.5px 10.5px;
  margin: 7.5px 3.5px;

  font-size:150%;

  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;

  -webkit-box-shadow: inset 0 0 37.5px #e8e8e8,0 1.5px 0 #c3c3c3,0 3px 0 #c9c9c9,0 3px 4.5px #333;
  -moz-box-shadow: inset 0 0 37.5px #e8e8e8,0 1.5px 0 #c3c3c3,0 3px 0 #c9c3c3,0 3px 4.5px #333;
  box-shadow: inset 0 0 37.5px #e8e8e8,0 1.5px 0 #c3c3c3,0 3px 0 #c9c9c9,0 3px 4.5px #333;
  text-shadow: 0 1.5px 0 #f6f6f6;

  /* Added for smooth transition */
  transition: all 0.1s ease-in-out;
}

/* Added for click/active effect */
.oft-kbd-sd:active {
    box-shadow: inset 0 0 37.5px #e8e8e8; /* Keep only the inset shadow */
    transform: translateY(1.5px); /* Move slightly down */
    padding-top: 6px; /* Adjust padding to compensate for movement (4.5 + 1.5) */
    padding-bottom: 3px; /* Adjust padding to compensate for movement (4.5 - 1.5) */
}


.oft-kbd-md {
  padding: 6px 14px;
  margin: 10px 6px;

  font-size:200%;

  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;

  -webkit-box-shadow: inset 0 0 50px #e8e8e8,0 2px 0 #c3c3c3,0 4px 0 #c9c9c9,0 4px 6px #333;
  -moz-box-shadow: inset 0 0 50px #e8e8e8,0 2px 0 #c3c3c3,0 4px 0 #c9c9c9,0 4px 6px #333;
  box-shadow: inset 0 0 50px #e8e8e8,0 2px 0 #c3c3c3,0 4px 0 #c9c9c9,0 4px 6px #333;
  text-shadow: 0 2px 0 #f6f6f6;

  /* Added for smooth transition */
  transition: all 0.1s ease-in-out;
}

/* Added for click/active effect */
.oft-kbd-md:active {
    box-shadow: inset 0 0 50px #e8e8e8; /* Keep only the inset shadow */
    transform: translateY(2px); /* Move slightly down */
    padding-top: 8px; /* Adjust padding to compensate for movement (6 + 2) */
    padding-bottom: 4px; /* Adjust padding to compensate for movement (6 - 2) */
}

.oft-kbd-lg {
  padding: 9px 21px;
  margin: 15px 9px;

  font-size:300%;

  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;

  -webkit-box-shadow: inset 0 0 75px #e8e8e8,0 3px 0 #c3c3c3,0 6px 0 #c9c9c9,0 6px 9px #333;
  -moz-box-shadow: inset 0 0 75px #e8e8e8,0 3px 0 #c3c3c3,0 6px 0 #c9c9c9,0 6px 9px #333;
  box-shadow: inset 0 0 75px #e8e8e8,0 3px 0 #c3c3c3,0 6px 0 #c9c9c9,0 6px 9px #333;
  text-shadow: 0 3px 0 #f6f6f6;

  /* Added for smooth transition */
  transition: all 0.1s ease-in-out;
}

/* Added for click/active effect */
.oft-kbd-lg:active {
    box-shadow: inset 0 0 75px #e8e8e8; /* Keep only the inset shadow */
    transform: translateY(3px); /* Move slightly down */
    padding-top: 12px; /* Adjust padding to compensate for movement (9 + 3) */
    padding-bottom: 6px; /* Adjust padding to compensate for movement (9 - 3) */
}

របៀបប្រើប្រាស់កូដនៅក្នុងការបង្ហោះ (Post)

បន្ទាប់ពីបានបន្ថែម​កូដ CSS ចូល template រួចហើយ ឥឡូវនេះយើងនឹងអនុវត្តកូដនោះនៅក្នុងអត្ថបទបង្ហោះ (blog post)។ ដើម្បីធ្វើដូចនេះ សូមអនុវត្តតាមជំហានខាងក្រោម៖

ជំហានទី 1: ចូលគណនី Blogger របស់អ្នក ហើយចូលទៅកាន់ផ្ទាំងគ្រប់គ្រង Blogger (blogger dashboard) ។

ជំហានទី 2: នៅលើផ្ទាំងគ្រប់គ្រង Blogger ចុចលើ New post (ឬ បង្ហោះថ្មី) ។

របៀបប្រើប្រាស់កូដពណ៌ស្រាល (Light Color) នៅក្នុងការបង្ហោះ (Post)

បន្ទាប់ពីបានបន្ថែម​កូដ CSS រួចហើយ ឥឡូវនេះយើងនឹងអនុវត្តកូដនោះនៅក្នុងអត្ថបទបង្ហោះ (blog post)។ ដើម្បីធ្វើដូចនេះ សូមអនុវត្តតាមជំហានខាងក្រោម៖

ជំហានទី 1: ចូលគណនី Blogger របស់អ្នក ហើយចូលទៅកាន់ផ្ទាំងគ្រប់គ្រង Blogger (blogger dashboard) ។

ជំហានទី 2: នៅលើផ្ទាំងគ្រប់គ្រង Blogger ចុចលើ New post (ឬ បង្ហោះថ្មី) ។

ជំហានទី 3: ឥឡូវប្តូរកម្មវិធីនិពន្ធការបង្ហោះទៅជាទម្រង់ HTML (HTML mode) បន្ទាប់មកចម្លង (copy) និងផាស (paste) កូដណាមួយពីខាងក្រោម៖ ឥឡូវប្តូរកម្មវិធីនិពន្ធការបង្ហោះទៅជាទម្រង់ HTML (HTML mode) បន្ទាប់មកចម្លង (copy) និងផាស (paste) កូដណាមួយពីខាងក្រោម៖

កូដគ្រាប់ចុច 

<kbd>Ctrl</kbd>
<kbd class="oft-kbd-sd">Ctrl</kbd>
<kbd class="oft-kbd-md">Ctrl</kbd>
<kbd class="oft-kbd-lg">Ctrl</kbd>

Tags: Blogger

Share: