How To Add Code Box with copy button In Blogger Post and pages - Teckpas.com

🔶️ How To Add Code Box with copy button In Blogger Post and pages.

🌍 Friends, How to add a code box in Blogger is the most frequently asked question by many bloggers. 

Blogger HTML code field is a field where you can enter a code or a paragraph that you want to provide to your visitors. 

Your visitors can copy the entire code  by simply clicking the "Copy" button. In this article, we will teach you how to add a code snippet in Blogger. 

The user can get the length code provided with one click. They will receive this code field. Inserting a code field in your Blogger post has many benefits. The code field looks attractive  to the user and makes the whole article more appealing despite the code field. 

You can use the code snippet to provide different types of coding languages ​​such as HTML, JavaScript, Java, CSS, Python, etc. The same code field is used to provide the code. So, let's get started. 

📡 How To Add Code Box with copy button In Blogger Post.

Follow the steps carefully to insert a code field with a copy button into your Blogger post. 

🌎 First, log in to your Blogger account and create a new post or page,

After creating your post, switch from Compilation view to HTML view and copy  and paste  the below HTML code into the HTML view. 

You can add your own text within the  tags. You can now edit the text and insert the code. 

You can add plain text  without parsing HTML code, but to add HTML or CSS code, you must parse the code and insert it into a  tag so that it is visible to the user and can be copied.

Copy your code

<blockquote id="myInput">Blogger HTML code field is a field where you can enter a code or a paragraph that you want to provide to your visitors. Your visitors can copy the entire code  by simply clicking the "Copy" button. In this article, we will teach you how to add a code snippet in Blogger.
</blockquote>

<button class="k2-copy-button" id="k2button"><svg aria-hidden="true" height="1em" preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24" width="1em" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13 6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25 2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z" fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0 1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0 0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626 2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z" fill="currentColor"></path></path></path></g></svg>Copy</button>  


<style>
.k2-copy-button svg{margin-right: 10px;vertical-align: top;}  
.k2-copy-button{
  height: 45px; width: 155px; color: #fff; background: #265df2; outline: none; border: none; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;}
.k2-copy-button:hover{background: #2ECC71;}
@media (max-width: 480px) {#k2button{width: 100%;}}
</style>


<script>
  function copyFunction() {
  const copyText = document.getElementById("myInput").textContent;
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  k2button.innerText = "Text copied";
    textArea.remove();
}
document.getElementById('k2button').addEventListener('click', copyFunction);
  </script>