The Best Automation Library (Selenium vs Playwright)

Are you thinking of adding code box to your website with a professional copy button? If so. you're in the right place! In this article. we will provide you with simple and detailed steps for adding an advanced code box with a copy button to your website.

Displaying code professionally is important for many websites. whether you are offering tutorials. sharing technical information. or developing software. A code display box allows visitors to see your code in an organized manner. making it easier for them to copy and use it in their own projects..

Adding a Code Box to Your Website in 2024

What is a Code Display Box?

A code display box is a frame used to display source code in an organized and visually appealing manner. It is commonly used in technical blogs and websites that focus on programming and development. In Blogger, it is also known by the "<pre>" tag for displaying code on the page and making it easy for visitors to copy.

If you are interested in programming and want to share the code you learn or create a blog where you offer programming codes, this box will help you do that. In addition, it is the best code display box for Blogger, featuring a professional and unique design and including a copy button for ease of use. Let's move on to explaining how to add the box to your blog..

How to Add a Code Display Box with a Copy Button on Blogger:

• Take a Backup of Your Blogger Template:
  Before making any changes to your template, make sure to take a backup.
  Go to your Blogger dashboard, then select "Theme."
  Click on the dropdown menu next to "Customize" and choose "Backup / Restore."
  Click "Download Full Template" to save a backup copy.
  
  

  Access the HTML Editor:
  Go to your Blogger dashboard, then select "Theme."
  Click on the dropdown menu next to "Customize" and choose "Edit HTML."

  
  Search for the Required Code:
  To open the search box, press "Ctrl + F" on your keyboard.
  Search for the following code: ]]></b:skin>.
  
  Paste the Following Code Directly Above the Previous Code:

  /*-- codebox by jistweb.com --*/
.code-box{border:1px solid #ccc;border-radius:4px;padding:16px;position:relative;margin:10px 0;}
.code-box pre{background-color:#f8f8f8;border:0;margin:0;overflow:auto;padding:16px}
.copy-button{background-color:#6cc060;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:12px;outline:0;padding:5px 13px;position:absolute;right:16px;top:16px;transition:background-color .2s}
.copy-button:hover{background-color:#5ca751}
.post-body pre, pre.code-box {direction: ltr;display: block;background-color: #9b9b9b0d;font-family: Monospace;font-size: 13px;color: #444444;white-space: pre-wrap;line-height: 1.4em;padding: 20px;border: 1px solid #9b9b9b1a;border-radius: 5px;}
 

Add JavaScript for Copy Functionality: Search for the code </body> and add the following code directly above it:

 <script type='text/javascript'>
//<![CDATA[
const codeBoxes=document.querySelectorAll(".code-box");codeBoxes.forEach(t=>{const e=t.querySelector(".copy-button");e.addEventListener("click",()=>{var e=t.querySelector("code");const o=window.getSelection(),c=document.createRange();c.selectNodeContents(e),o.removeAllRanges(),o.addRange(c),document.execCommand("copy"),o.removeAllRanges()})});   
//]]></script> 

We’ve finished the first part. Now, go to the article where you want to display the code. Click on the pencil icon located at the top right and select "View HTML."

Next, we will convert the code we want to add to the article to prevent it from mixing with the template code. To convert the code, click here.

Choose the location in the article where you want to display the code and paste the following code:

    <div class="code-box">
  <pre><code>
  
  <!--  Put the code you want to display here after converting it.-->
    
</code></pre>
  <button class="copy-button">copy</button>
</div>

If you want to display code, you need to convert it into a format that can be displayed. Use a code conversion tool, then paste the code and click "Convert." After that, copy the converted code and insert it into the final code. Save the changes, and the result will appear with a copy button for the code. If you want to change the appearance of the code box, you can explore other available styles.