ខ្ញុំធ្លាប់លើកយកបង្ហាញពីរបៀបដាក់ប្រអប់សម្រាប់ដាក់កូដ ងាយស្រួលចម្លង ពេលម្ចាស់ប្លក់សរសេរគន្លឹះទាក់ទងអំពីកូដ ដែលត្រូវការប្រអប់កូដ ព្រោះវាមើលទៅស្តង់ដារ និងមានរបៀបជាងការប្រើប្រាស់មុខងារ Quote text របស់ឧបករណ៍តែងអត្ថបទ Blogger ។
ក្នុងគន្លឹះនេះខ្ញុំបានឃើញប្រអប់កូដមួយដែលទំនង គួរតែលើកយកមកបង្ហាញបន្ត ដើម្បីងាយស្រួលមានជម្រើសច្រើនដល់អ្នកប្រើប្រាស់ ឲ្យស៊ីគ្នាជាមួយ template របស់ Blogger ឬដើម្បីឲ្យដឹងពីភាពប្លែកថ្មីនៃកូដ សាករហូតឲ្យតែចេញថ្មី !!!😁 ។
៙ របៀបដាក់កូដចូលក្នុង template ប្លក់ ៖
1- ចូលទៅ Blogger.com ដើម្បី Login គណនីរបស់លោកអ្នក។
2- ចូលទៅកាន់ Theme >> ចុចសញ្ញាព្រួញក្បែរពាក្យ CUSTOMIZE ហើយយកពាក្យ Edit HTML។
How To Add A Code Box With A Copy To Clipboard Button On Blogger
1. Open a link provided below where you will find a HTML for code box and it's CSS.
2.
Copy a HTML for code box, then login to your Blogger account and create
a new post or select a post you want to edit from a list of existing
posts.
3. Switch to HTML view and paste the code at a place you want a code box to appear.
4. Go back to a website and copy the CSS code then paste it just below the first code.
5.
Switch back to Compose view and preview your post to see how a box
looks like. In case you have mistaken, you can repeated the installation
process.
How to add a code box in a blogger is the most demanded question by many blogger. Blogger html code box
is the box where we can input some codes or any paragraph to provide to
our visitor. Visitors can copy the whole code with just a single click
by clicking the copy button.In this article i will show you how to add code snippets in blogger.
Users can get a length code provided by you in just a single click.You
will get this code box.
Advantage of adding code box in blogger
There are many advantages of inserting a code box in a blogger post. Code box gives an attractive look to users and it creates a whole article more engaging in spite of code box. You can use code snippets to give many types of coded languages such as HTML, Javascript, Java, CSS, Python etc. The same code box is used to provide codes to you.
So, without delay, let’s get started:
How to add code box with button in blogger website
Follow the steps correctly to add a code box with a copy button in the blogger post.
First of all log in to your blogger account,and create a new post. After creating the post switch, compose view to HTML view and copy the html code provided below and paste in the html view. You can add your own text in the <pre>tag.
HTML
Now copy CSS and Javascript and paste it below html code.That’s it your code box with copy button has been created.
CSS and Javascript
Now you can edit your text and can give codes in it. Simple text can be added without parsing the html code but to add html or css code you need to parse the code and then paste it in the <pre> tag. Now you code will be visible to users and can be copied.
For parsing html code you can use Free Parsing Tool.
After parsing the code paste in the pre tag (<pre>Your code here </pre>).
How to add multiple code box in one post
3- ស្វែងរកស្លាក </body> ហើយចម្លងកូដ CSS & javascript ខាងក្រោម យកទៅដាក់ខាងលើស្លាកនោះ រួចចុច Save template ។
៙ របៀបប្រើក្នុងអត្ថបទ ៖
1- ចុចបង្កើត post ថ្មីមួយ
2- ឈរលើតាប HTML ដើម្បីដាក់កូដប្រអប់ចូលអត្ថបទ។
ចំណុចកែប្រែគឺ៖
- ពាក្យ HTML យើងអាចកែប្រែដាក់ជា CSS ឬ javascript បើយើងមិនដឹងថាកូដដែលយើងលើកបង្ហាញគេជាកូដអ្វីទេយើងអាចប្ដូរជាពាក្យខ្មែរឬអង់គ្លេសតាមសម្គាល់ដែលយើងចង់ដាក់ចុះ ។
- ពាក្យ KKKKKKKKKKKKKKKKKKKKKKKKKK គឺជាកន្លែងដាក់កូដ
<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>ជាចុងក្រោយ ការបង្ហាញខាងលើគឺសម្រាប់អ្នកអត់ចេះសោះ តែសម្រាប់អ្នកចេះកូដខ្លះៗគឺមិនមានអ្វីដែលពិបាកទេគ្រាន់តែដឹងថាពេលណាត្រូវឈរលើតាប HTML និងពេលណាត្រូវឈរលើតាប Compose View ៕
___________________
ប្រភពពី https://www.techyleaf.in/2022/03/how-to-add-code-box-with-copy-button.html
ប្រភពពី https://celestialsamnang.blogspot.com/2024/07/code-box-with-copy-button-to-your.html
ប្រភពពី https://medium.com/@hamiudsohail99899/how-to-add-code-box-in-blogger-post-b1fbc5e7503f
<!--[ 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>
