Subscribe my YouTube channel: Click to Subscribe!

How to create Stylish & Responsive HTML, CSS ,and JS Codebox on Blogger Website | satyakipathshala.in

We use code box to make user experience better for our blog visitors. In this article you will be able to learn how to create stylish code box for bl
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hello! Welcome to satyakipathshala.in. In this article, I will tell you how to add a stylish and responsive code box on the Blogger website.

I use code box on my website because as you know I provide scripts on my website. There are so many ways to add a code box and here I will give you the new design of a code box with a copy button. I am also using this code box.

There are so many designs of code boxes out there. Some code box feature comes with the Blogger Template and some designs you have to implement. So, in this article, I'll show you how you can implement the code to make a beautiful code box for Blogger Website.

How to create Stylish & Responsive HTML, CSS and JS Codebox on Blogger Website | satyakipathshala.in
Stylish & Responsive HTML, CSS, and JS Codebox

Why code box is essential for a Blog

A code box is important to provide any code to your blog reader. A code box makes the user experience better. The reader can simply use the code box to copy the codes with ease. A code box helps to make your blog look professional.

Related Posts

In this article, I'll give you the proper HTML, CSS, and JS code box script. This code box is fully responsive so don't worry about that.

How to create a Stylish code box for Blogger Website

STEP 1: First of all Login into your Blogger Dashboard.
STEP 2: On Blogger Dashboard, click Theme.
STEP 3: Click the arrow down icon next to the 'customize' button.
STEP 4: Click Edit HTML, and you will be redirected to the editing page.
STEP 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above it.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customize 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.

CSS
.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}

.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 6: Paste the following HTML just below to <body> tag.

HTML
<div id='toastNotif' class='tNtf'></div>
STEP 7: Now add the following JavaScript Code just above to </body> tag.

JS
<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>
STEP 8: Now save the theme by clicking on the save icon.

That's done! Now add the following HTML codes on your blog post where you want to add the stylish code box.

HTML
<!--[ 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>

Source:
www.fineshopdesign.com

Conclusion

I hope you liked this article How to create Stylish & Responsive HTML, CSS, and JS Codebox on Blogger Website. Don't forget to share this article with others. Also, don't forget to bookmark this blog to get this kind of interesting stuff. Let me know in the comment section how did you find this article. See you soon in the next post.

Post a Comment

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
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.
Site is Blocked
Sorry! This site is not available in your country.