What tutorial do you want for the next article! Request Here!

How to Add Code Box with Copy Button on Blogger

If you share codes on your site, then you are in the right place this Code Box will help you to share codes, it also contains a copy button.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

If you share codes on your site, then you are in the right place this Code Box will help you to share codes, it also contains a copy button to copy the code.

Code Box for Blog Posts
©The Web Trick | Code Box for Blog Post

Adding a code box with a copy button on your Blogger posts can be a useful feature for your readers. It allows them to easily copy and paste code snippets from your blog into their own projects. In this article, we will show you how to add a code box with a copy button to your Blogger posts.

Before we start let's take a look at its Demo.

How to create Code Box?

Creating Codebox in your blog will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Important!Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to the 'Customize' button.

Step 4: Choose Edit HTML, you will be redirected to the editing page.

Step 5: Next search the ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code.

If your template contains a dark mode function, and you want it to be a different color when it's turned on, you can change the codes to suit your needs. Each template may have a different dark mode class, so please adjust accordingly. You can replace the marked class with the dark mode class from your template.

/* Codebox by The Web Trick */
.cBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .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}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.copied .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>")}
.cBox pre{min-height:350px;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}
.cBox pre::before, .cBox pre::after{content:''}
.darkMode .cBox{background:#2d2d30}
.darkMode .cBox pre{background:#252526;color:#fffdfc}
/* Toast Notification by The Web Trick */
.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)}

Note that we already have used the above Toast Notification CSS Code in previous posts. If you already have added it in your Theme XML, then delete toast notification css from above code and follow the next steps.

Step 6: Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.

<!--[ Toast Notification by The Web Trick ]-->
<div id='toastNotif' class='tNtf'></div>

Again don't add if you already have added it Toast Notification.

Step 7: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.

<script>/*<![CDATA[*/ /* Codebox Script by The Web Trick */ 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>

Step 8: Finally, click this icon to save your changes.

That's done! Now, anywhere you want Codebox to appear in your blog posts, use the HTML codes below.

<!--[ Code Box 1 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <!--[ Copy Button ]-->
    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
  <!--[ Content ]-->
  <div id='code1'>

<!--[ Code Box 2 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <!--[ Copy Button ]-->
    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
      <i class='icn'></i>
  <!--[ Content ]-->
  <div id='code2'>

<!--[ Code Box 3 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <!--[ Copy Button ]-->
    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
      <i class='icn'></i>
  <!--[ Content ]-->
  <div id='code3'>

Please consider altering the indicated areas because the JavaScript does not contain any libraries and is written in Vanilla JavaScript.


The purpose of this tutorial is to show you how to add the Codebox to your Blogger website. I hope you find this information interesting. Please share this article with your friends and family. And if you have any questions or encounter any difficulties in any aspect, please ask them in the comment section.


You May Like These Posts:

About the Author

Hey there! My name is Sandeep Kumar aka Sandy, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Rajasthan, India. I love to Code and create interesting things while playing with it.

Buy me a Coffee

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.