Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Code Box With Copy Button

Let's Begin

To Add the code box with the copy button, you need to follow the below

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

Step #2: Click on Now click on -> Theme -> Edit HTML 

Step #3: Now find the  by pressing Ctrl + F  

Step #4: Copy any code from below and Paste the code above/before <!--[ </body> close ]--> or </body>

Now copy the CSS and JavaScript code and paste it just below it. (Note: You can also add it in your theme editor just above

 <style>
  .abdullahdcurz_code{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}
  .abdullahdcurz_code .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
  .abdullahdcurz_code .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
  .abdullahdcurz_code .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}.abdullahdcurz_code .C_box_main:hover{opacity:.8}.abdullahdcurz_code .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16.45385' rx='4' width='16.45385' x='5.54615' y='5.54615'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>&quot;);background-size:cover;background-repeat:no-repeat;background-position:center}
  .abdullahdcurz_code .C_box_main.copied{background:#2dcda7}
  .abdullahdcurz_code .C_box_main.copied .CBox_icn{background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>&quot;)}
  .abdullahdcurz_code 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;}
  .abdullahdcurz_code pre::before, .abdullahdcurz_code pre::after{content:&#39;&#39;}
  .dark-Mode .abdullahdcurz_code{background:#2d2d30}.dark-Mode .abdullahdcurz_code 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 rg@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 class='tNtf' id='toastNotif'/> 

<script>
  /*ba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
  <![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> 

How to put Code Frame in blogger post

To place the code frame in a blogger post/page, copy and save the code given below. Now wherever you want to place this code box, paste this code there and paste your code in place of <p>This is a simple HTML code 1 </p> and put it in the blog post/page.

  <div class='abdullahdcurz_code'>
    <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>&lt;p&gt;This is a simple HTML code 1 &lt;/p&gt;</pre>
    </div>
  </div>

  <div class='abdullahdcurz_code'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy2' class='C_box_main' onclick="copyC('copy2','code2')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code2'>
      <pre>&lt;p&gt;This is a simple HTML code 2 &lt;/p&gt;</pre>
    </div>
  </div>

  <div class='abdullahdcurz_code'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy3' class='C_box_main' onclick="copyC('copy3','code3')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code3'>
      <pre>&lt;p&gt;This is a simple HTML code 3 &lt;/p&gt;</pre>
    </div>
  </div>

Copyright:
abdullahdcurz.blogspot.com

Go to Link

Go to Link