ប្រអប់​កូដជាមួយ​ប៊ូតុង​ចុច​ចម្លង​សម្រាប់​ប្លក់ Code box with copy button to your Blogger

ខ្ញុំ​ធ្លាប់​លើក​យក​បង្ហាញ​ពី​របៀប​ដាក់​ប្រអប់​សម្រាប់​ដាក់​កូដ ងាយស្រួល​ចម្លង​ ពេល​ម្ចាស់​ប្លក់​សរសេរ​គន្លឹះ​ទាក់ទង​អំពី​កូដ ដែល​ត្រូវ​ការ​ប្រអប់​កូដ ព្រោះ​វា​មើល​ទៅ​ស្តង់ដារ និង​មាន​របៀប​ជាង​ការ​ប្រើប្រាស់​មុខងារ Quote text របស់​ឧបករណ៍​តែង​អត្ថបទ​ Blogger ។

ក្នុង​គន្លឹះ​នេះ​ខ្ញុំ​បាន​ឃើញ​ប្រអប់​កូដ​មួយ​ដែល​ទំនង គួរតែ​លើក​យក​មក​បង្ហាញ​បន្ត​ ដើម្បី​ងាយស្រួល​មាន​ជម្រើស​ច្រើន​ដល់​អ្នក​ប្រើប្រាស់ ឲ្យ​ស៊ី​គ្នា​ជាមួយ ​​template របស់ Blogger ឬ​ដើម្បី​ឲ្យ​ដឹង​ពី​ភាព​ប្លែក​ថ្មី​នៃ​កូដ សាក​រហូត​ឲ្យ​តែ​ចេញ​ថ្មី !!!😁 ។

៙ របៀប​ដាក់​កូដ​ចូល​ក្នុង template ប្លក់ ៖

1- ចូល​ទៅ Blogger.com ដើម្បី Login គណនី​របស់​លោកអ្នក។
2- ចូល​ទៅ​កាន់ Theme >> ចុច​សញ្ញា​ព្រួញ​ក្បែរ​ពាក្យ CUSTOMIZE ​ហើយ​យក​ពាក្យ Edit HTML។
3- ស្វែងរក​ស្លាក </body> ហើយ​ចម្លង​កូដ CSS & javascript ​ខាង​ក្រោម​ យក​ទៅ​ដាក់​ខាង​លើ​ស្លាក​នោះ រួច​ចុច Save template ។

<style> .K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px} .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem} .K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center} .K2_CBox .C_box_main.copied{background:#2dcda7} .K2_CBox .C_box_main.copied .CBox_icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")} .K2_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;} .K2_CBox pre::before, .K2_CBox pre::after{content:''} .dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc} .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards} @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}} @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)} </style> <div id='toastNotif' class='tNtf'></div> <script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

4- Save Theme ជា​ការស្រេច។

៙ របៀប​ប្រើ​ក្នុង​អត្ថបទ ៖

1- ចុច​បង្កើត post ថ្មី​មួយ
2- ឈរ​លើ​តាប HTML ដើម្បី​ដាក់​កូដ​ប្រអប់​ចូល​អត្ថបទ។

<!--[ Code Box 1 ]-->
  <div class='K2_CBox'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code1'>
      <pre>KKKKKKKKKKKKKKKKKKKKKKKKKK</pre>
    </div>
  </div>

ចំណុច​កែប្រែគឺ៖

• ពាក្យ HTML យើង​អាច​កែប្រែ​ដាក់​ជា CSS ឬ javascript បើ​យើង​មិន​ដឹង​ថា​កូដ​ដែល​យើង​លើក​បង្ហាញ​គេ​ជា​កូដ​អ្វី​ទេ​យើង​អាច​ប្ដូរ​ជាពាក្យ​ខ្មែរ​ឬ​អង់គ្លេស​តាម​សម្គាល់​ដែល​យើង​ចង់​ដាក់​ចុះ ។
• ពាក្យ KKKKKKKKKKKKKKKKKKKKKKKKKK គឺ​ជា​កន្លែង​ដាក់​កូដ

3- តើ​យើង​ដាក់​កូដ​ដែល​យើង​ចង់​ដាក់​ក្នុង​ប្រអប់​កូដ​យ៉ាង​ដូចម្ដេច? វិធី​មាន​២ គឺ​មួយ​ដាក់​កូដ​ចូល​ប្រអប់​​ដោយ​ឈរ​លើ​តាប HTML, ដែល​កូដ​ដែល​យើង​យក​មក​ដាក់​កន្លែង​អក្សរ KKKKKKKKKKKKKKKK គឺ​ត្រូវបាន​ធ្វើ HTML Encode ដើម្បី​ឲ្យ​វា​ដំណើរការ​បាន។ វិធី​ទី​២ គឺ​ត្រូវ​ឈរ​លើ​តាម Compose View រួច​ដាក់​កូដ​ជំនួស​ឲ្យ​អក្សរ KKKKKKKKKKKKKKជា​ការស្រេច ។

ជា​ចុង​ក្រោយ ការ​បង្ហាញ​ខាង​លើ​គឺ​សម្រាប់​អ្នក​អត់​ចេះ​សោះ តែ​សម្រាប់​អ្នក​ចេះ​កូដ​ខ្លះៗ​គឺ​មិន​មាន​អ្វី​ដែល​ពិបាក​ទេ​គ្រាន់តែ​ដឹង​ថា​ពេល​ណា​ត្រូវ​ឈរ​លើ​តាប HTML និង​ពេល​ណា​ត្រូវ​ឈរ​លើ​តាប Compose View ៕

___________________
ប្រភព​ពី https://www.techyleaf.in/2022/03/how-to-add-code-box-with-copy-button.html