قروب نادي الفيجاء السعودي على واتساب

 Introduction

 Hello guys, welcome to our blog blogging doses. I am Sohil and today I will explain to you how to add the latest stylish Code Box in your blogger blog post.

Whenever you want to provide a script of specific elements then you have to provide HTML, CSS and JavaScript thus you need a clean code box. It will also look good and clean to see and use, so the audience will not confuse what is text and what is Code. 

Many bloggers don't know how to use the code box and they simply paste their code with their text and it becomes Messy to read and another thing is that people will jump to another blog because of Messy content.

Don't worry, by reading and understanding our today's article on how to add a stylish Code Box in blogger you will definitely implement this in your blog and increase your readability score.

Let's start it 

What is a Code Box in post ?

Code box is a simple feature that showcases your script in a nice way with good features like copy to clipboard button.

It specifically contains the script/codes. It is helpful to provide the codes to your fellow audience in a grateful manner.

Why is a code box useful ?

Code box is useful because if you had disable the copy paste then if you had wrote script and text together then the codes can't be copy by your visitors.

If the code is long then the code box can showcase just the manner that all codes fix in a small amount of space. It has the side scroll option which you can scroll and see the remaining codes.

Now if you gain enough knowledge about code boxe then we can go with implementing this stylish Code Box in our blog post.

How to add the latest stylish Code Box in blogger ?

Creating these features doesn't take a lot of time I had already designed for you guys. What you have to do is simply copy paste this below given script in there right places in your blogger XML template.

Important!Before customising your blogger template i will highly recommend you to take your XML backup if you had made any mistake in code placing then you can recover your previous template.

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

Step 2: On Blogger Dashboard, click Theme section

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

Step 4: Click Edit HTML option, you will jump to the editing page.

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

If your template contains dark mode features, and if you want a different color when in dark mode, you can customise the codes as per your need. Different templates can have a different dark mode class, so please adjust it, you can replace the highlighted 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,");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,")}
.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 below given 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)}

Step 7: Now Paste the following HTML just below to<body> tag. If you are not able to find it, it has probably already been parsed, which is &lt;body&gt;.

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

Step 8: Add the below given JavaScript Code just above to </body> tag. If you are not able to 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 all changes by clicking on this save icon 

Congratulations! 🥳You have now successfully added the code boxes script. Now you can implement the following HTML Codes in your Blog Posts wherever you want to show the 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>

All codes from: fineshopdesign.com

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

Conclusion:

I hope you like my today's article and gain the following knowledge to implement this. If you loved our article please give us a star rating. And share with your friends.