If you provide Codes to your visitors, this Codebox will help you to do so, it also contains a button to copy the Codes.
Check out the new Codebox with dark mode and copy buttons.
Hello! Welcome to the daily blog. I hope you are well.
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 Codebox with style. With its help, you will be able to provide codes to your visitors in an elegant Codebox. A copy button has also been added to it, so codes can be copied by clicking this button.
How to create a stylish code box?
Creating Codebox for blog posts won't require much knowledge about HTML, CSS, or JS because I've already designed it for you. What you need to do is implement the codes in the correct place in your Blogger theme XML.
Important!
Before you start adding code in XML, I'll recommend that you make a backup of your current theme. By any chance, if any problem occurs, you can restore it later.
Step 1: First of all, login to your Blogger dashboard.
Step 2 – In the Blogger Dashboard, click Theme.
Step 3: Click the down arrow icon next to the 'customize' button.
Step 4: Click Edit HTML, you will be redirected to the edit page.
Step 5 – Now find the ]]></b:skin> code and paste the following CSS codes just above it.
If your template has a dark mode feature, and you want a different color when in dark mode, you can customize the codes to suit your needs. Each template can have a different dark mode class, so adjust it, you can replace the checked 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,<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}/* 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 – Paste the following HTML just below the <body> tag. If it doesn't find it, it's probably already parsed, which is <body>.
<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>Again, don't add if you've already added it.
Step 8 – Now add the following JavaScript code just above the </body> tag. If it doesn't find it, it's 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 changes by clicking 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>conclusion
It is about creating Codebox for blog posts. I hope you enjoy this article. Please share this article. And if you are facing problem in any section or have any question then ask us in the comment box. Thank you!
Tags:
Blogger Widgets
