Blogger/Website Code Box with Copy and Dark Mode Buttons
DemoHow to Add Code Box with Copy and Dark Mode Buttons in 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.
Adding Toast Notification Codes
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}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* Codebox by House Of Blogger */
.cBx{-webkit-tap-highlight-color:transparent;background:#f1f3f4;position:relative;padding-top:30px;border:1px solid #dadce0;border-radius:5px;margin:40px 0}
.cBx pre{display:block;position:relative;font-family:monospace;font-size:13px;line-height:1.6em;hyphens:none;overflow:auto;direction:ltr;white-space:pre;background:transparent;padding:0 15px 15px;margin:0}
.cBx pre::before, .cBx pre::after{display:none}
.cBxT{position:absolute;right:0;top:0;padding:10px 10px 0 0}
.cBxT button{position:relative;background:transparent;outline:none;border:none;cursor:pointer;padding:0;margin:0;width:20px;height:20px;display:inline-flex;justify-content:center;align-items:center}
.cBxT button:not(:last-child){margin-right:10px}
.cBxT button svg{width:20px;height:20px;fill:none!important;stroke:#000 !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.cDrk .cBxT button .moon, body:not(.cDrk) .cBxT button .sun, .cBx.copied button .copy, .cBx:not(.copied) button .check{display:none}
.cBxT button span{display:block;position:absolute;bottom:calc(20px + 10px);right:-10px;background:#252526;color:#fff;white-space:nowrap;font-size:11px;line-height:1rem;padding:4px 6px;border-radius:3px;opacity:0;visibility:hidden;transition:all .2s ease}
.cBxT button:hover span{opacity:1;visibility:visible;bottom:calc(20px + 20px)}
.cBxT button span::before{content:'';position:absolute;bottom:-3px;right:15px;width:8px;height:8px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.cDrk .cBx{background:#283142;color:#fffdfc}
.cDrk .cBx pre{color:#eceff1}
.cDrk .cBxT button svg{stroke:#fff !important}
Step 7: Paste the following Javascript just above </body> tag. If you don't find it, it is probably already parsed which is </body>.
<script>
/*<![CDATA[*/
/* Codebox by House Of Blogger */
(() => {
/* config */
var config = {
copyText: 'Copy to Clipboard',
copiedText: 'Copied to Clipboard',
lightText: 'Switch to Light',
darkText: 'Switch to Dark',
copiedToast: 'Copied to Clipboard!'
}
/* main scripts */
var cBox = document.querySelectorAll(".cBx");
var dBdy = document.getElementsByTagName('body')[0];
localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('cDrk') : dBdy.classList.remove('cDrk');
for (var i = 0; i < cBox.length; i++){
let c = cBox[i];
c.setAttribute('data-code', i);
c.insertAdjacentHTML("afterbegin", "<div class='cBxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");
}
window.codeDark = () => {
localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");
localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("cDrk") : dBdy.classList.remove("cDrk");
}
window.codeCopy = (index) => {
if (index !== undefined) {
let el = document.querySelector(".cBx[data-code='" + index + "']");
if (el !== null){
let pre = el.querySelector('pre');
if (pre !== null){
var e = getSelection(),
t = document.createRange();
e.removeAllRanges();
t.selectNodeContents(pre);
e.addRange(t);
document.execCommand("copy");
e.removeAllRanges();
el.classList.add('copied');
toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
setTimeout(() => {
el.classList.remove('copied');
}, 2000)
}
}
}
}
})()
/*]]>*/
</script>
That's done! Now use the following HTML Codes in your Blog Posts through HTML view wherever you want to add Codebox.
<div class='cBx'> <pre><!--[ Code Box 1 ]--></pre> </div> <div class='cBx'> <pre><!--[ Code Box 2 ]--></pre> </div> <div class='cBx'> <pre><!--[ Code Box 3 ]--></pre> </div>
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!
