How to Create Stylish Codebox for Blog Posts

How to Create Stylish Codebox for Blog Posts

How to Create Stylish Codebox for Blog Posts

How to Create Stylish Codebox for Blog Posts

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.

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

Demo

How to create Stylish Codebox?

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.

/* Toast Notification by Fineshop Design */
.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}}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

/* 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:''}
.drK .cBox{background:#2d2d30}
.drK .cBox pre{background:#252526;color:#fffdfc}

Step 6: 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>

Step 7: 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 8: Save the changes by clicking on this icon

Read also

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>

👉 Please Support Us ❤️ Subscribe OUR YouTube channel👍

Note: 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 or you can  Contact Us. Thank you!


Post a Comment

WMRFast - лучшее место для заработка
WMRFast is the best place to make money
SerpClix is the best place to make money
SerpClix is the best place to make money
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.