Want more tutorials? Request!

How to Create Stylish Codebox for Blog Posts

If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.

Hello! Welcome to Fineshop Blog. Hope you are doing well.

If you have ever provided codes to your visitors, then you must have needed a Codebox. That is why in this article we will create stylish Codebox. With its help, you will be able to provide codes to your visitors in a Stylish Codebox. A copy button has also been added to it, so the codes can be copied by clicking on this button.

Codebox for Blog Posts
© Fineshop Design | Codebox for Blog Posts

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


How to create Stylish Codebox?

Creating Codebox for Blog Posts 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 start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can 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 'customize' button.

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

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/* Codebox by Fineshop 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}

Step 6: Add the following CSS Codes just below to CSS Codes we have added in Step 5.

/* Toast Notification by Fineshop */
.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 CSS Codes in previous posts. If you already have added it in your Theme XML, then skip this step and follow the next steps.

Step 7: 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 Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>

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

Step 8: 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 Fineshop Design */ 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 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>

The JavaScript doesn't contain any Library, it is made using Vanilla JavaScript, so please consider changing the marked parts.

Terms of Use

If you want to use this Codebox in your posts, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.fineshopdesign.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about creating the Codebox for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

© Copyright:
www.fineshopdesign.com

Getting Info...

About the Author

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

Buy me a Coffee

6 comments

  1. Bagaimana cara mengatur jenis PWA Anda? Tolong beri saya file manifes
    1. I shall write an article on it soon. Stay connected.
    2. Thank you 🙂
  2. How to use Html code in blogger post
    1. Simply switch from Compose View to HTML View
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.