How To Add Code Box In Blogger Post?

Hey learners,

Today we learn about how to implement a code box in a Blogger post. When it comes to sharing code snippets on your Blogger website, it might be crucial and a little bit tricky. Actually, when we talk about the Blogger website, maximum implementation is done through code injection, but no worries in this blog; we will explore how to effectively display programming code in your Blogger posts. We will cover everything from basic formatting to advanced techniques for improved presentation.

How To Add Code Box In Blogger Post?

Simply follow all the steps discussed below, and you will successfully add a code box to your Blogger post.

Getting Started with Code in Blogger

To begin displaying code within your Blogger posts, you’ll need to create a new post in your Blogger dashboard. It's essential to understand how to properly format code snippets to ensure they are easy to read and visually appealing.

First, navigate to your Blogger dashboard and create a new post. Enter a title for your post and switch to the HTML view.
Choose a place where you want to paste your code box. Firstly, add the below CSS and JS code.

CSS and JS

<style>  
  .K2_CBox{position:relative;background:#fff;width:98%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}  
  .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}  
  .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}  
  .K2_CBox .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}
  .K2_CBox .C_box_main:hover{opacity:.8}
  .K2_CBox .C_box_main .CBox_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}  
  .K2_CBox .C_box_main.copied{background:#2dcda7}  
  .K2_CBox .C_box_main.copied .CBox_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>")}  
  .K2_CBox 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;}  .K2_CBox pre::before, .K2_CBox pre::after{content:''}  .dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox 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 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)}  </style>
<div id='toastNotif' class='tNtf'></div>
<script>/*<![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>

Now, after CSS and Js, add the below HTML code.

HTML

<!--[ Code Box 1 ]-->
  <div class='K2_CBox'>
    <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>Your Codes Goes Here.</pre>
    </div>

  </div>

Hence, in this way, your code box in the Blogger post implemented successfully.

Now the next step is adding codes to it. Add your code through the compose view.

For example, if you have a JavaScript code snippet, you can copy it from your code editor and paste it through compose the view of your post at the place of Your Codes Goes Here.

Note if you don't want to add CSS and JS again and again in every post, simply implement it in Blogger Theme before </body> tag

However, simply pasting the code won't yield the best results. The default formatting makes the code hard to read. To enhance this, you will need to wrap your code in specific HTML tags.

How will the code box look?

@theAShub

Thank-you for reading this post. Your Codes Goes Here.

Conclusion

You can find out many other ideas regarding code box implementation in Blogger posts, but the above-discussed method is easy and workable in every format. Easy to use and customization. That's it for this post. If there is any query, let me know in the comment box.