How add blogger code box copy with clipboard 2023 AR3school

How to add the best copy text or code box in Blogger 2023 with the Copy with Clipboard 2023 ultimate method?

This Code Box is a special kind of box in which Users keep their code so that readers can easily find them.

You don't need to give any single amount to create your blogs. It gives you many themes and options to make your blog look professional and beautiful.  

Code Box is a special type of box in which Users keep their code so that Users can easily find them and clickable How To Add Code Box in Blogger Post There are several ways of adding a Code Box in your Blog, but some of them can harm your blog. 

You can find many tutorials about how to add code boxes on Blogspot templates or posts, but the code you will find on the majority of websites is not user-friendly like this code to add a clickable text box in Blogger post by this way

How to add a blogger code box to your post?

Firstly this code box will appear like this:

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }<span style="background-color: #f5f8fa; font-family: "Courier New", Courier, monospace;">.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat;}

For every post, you need to use this code copy and paste where you want to show by scrolling the HTML view post.

<p>

  <textarea class="js-copytextarea1">

put your code or text here

    

    </textarea><br />

</p>

<p>

  <button class="js-textareacopybtn">COPY</button>

</p>

<script>

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {

  var copyTextarea = document.querySelector('.js-copytextarea1');

  copyTextarea.select();

  try {

    var successful = document.execCommand('copy');

    var msg = successful ? 'successful' : 'unsuccessful';

    console.log('Copying text command was ' + msg);

  } catch (err) {

    console.log('Oops, unable to copy');

  }

});

</script><style> 

textarea {

  width: 100%;

  height: 180px;

  padding: 12px 20px;

  box-sizing: border-box;

  border: 2px solid #ccc;

  border-radius: 4px;

  background-color: #f8f8f8;

  font-size: 16px;

  resize: yes;

}

</style>

You can also change Border Pixels, Border Color, Color Inside the Box, height, and width.  For this:

•  go to Google and search for Html color code then select your color and replace it with your current color. 
• Press on Publish. 
• You are done code box has been added to your blogger.

Conclusion:

I think this is the best code can use it and I hope after reading this post, you clearly understand how to add a code box in your Blogger Post by using HTML javascript code from ar3school if you have any problems please contact us or leave a comment bellow