Before we start let's take a look at its Demo.
How to create Stylish Codebox?
Since I have already designed Codebox for Blog Posts, creating it won't require much experience with HTML, CSS, or JS. The codes must be implemented in the appropriate locations within the Blogger Theme XML.
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.
/* 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 5: Add the following CSS Codes just below to CSS Codes we have added in.
Step 6.
/* 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 6. Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is <body>.
<!--[ 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 </body>.
<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.
Conclusion
Reference:
https://www.fineshopdesign.com