The most effective method to Create Stylish Codebox for Blog Posts

August 18, 2022 February 12, 2025

On the off chance that you give Codes to your guests, this Codebox will assist you with doing that, it likewise contains a button to duplicate the Codes.

Look at the new Codebox with Dark Mode and Copy Buttons.

Hi! Welcome to PH Wizards Blog. Trust you are getting along nicely.

If you have at any point given codes to your guests, you probably required a Codebox. To that end in this article, we will make a smart Codebox. With its help, you will really need to give codes to your visitors in a Stylish Codebox. A duplicate button has likewise been added to it, so the codes can be replicated by tapping on this button.

Before we start we should investigate its Demo.

How to make a Stylish Codebox?

Making Codebox for Blog Posts won't need a lot of information about HTML, CSS, or, JS since I have proactively planned it for you. What you really want to do is to execute the codes at a lightweight t spot in your Blogger Theme XML.

Significant! Before we begin adding codes in XML, I will prescribe you to take a Backup of your ongoing subject. By some coincidence assuming any issue happens, you can reestablish it later.

Stage 1: Most importantly Login to your Blogger Dashboard.

Stage 2: On Blogger Dashboard, click Theme.

Stage 3: Click the bolt-down symbol next to 'customize the 'customize the button.

Stage 4: Click Edit HTML, you will be diverted to altering the page.

Stage 5: Presently search the code ]]></b: skin> and glue the accompanying CSS Codes only above to it.

On the off chance that your layout has a dull mode highlight, and assuming that you need an alternate tone when in dim mode, you can modify the codes according to your need. Every format can have an alternate dim mode class, so kindly change it, you can supplant the noticeable class with your layout dim mode class.

/* Codebox by PH Wizards Design */
.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}

Stage 6: Add the accompanying CSS Codes only beneath to CSS Codes we have added in Stage 5.

/* Toast Notification by PH Wizards */
.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 as of now have involved the above CSS Codes in past posts. If you as of now have added it in your Theme XML, avoid this step and follow the subsequent stages.

Stage 7: Glue the accompanying HTML only underneath to <body> tag. If you don't find it, it is most likely currently parsed which is <body>.

<!--[ Toast Notification by PH Wizards ]-->
<div id='toastNotif' class='tNtf'></div>

Again don't add assuming you as of now have added it.

Stage 8: Presently add the accompanying JavaScript Code only above to the athethe </body> tag. In case you don't find it, it is probably at present parsed which is </body>.

<script>/*<![CDATA[*/ /* Codebox Script by PH Wizards
 */ 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>

Stage 9: Save the changes by clicking on this icon

That's done! Now use the following HTML Codes in your Blog Posts wherever you want to add Codebox.

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

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

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