How to Make Codebox with Copy and Dark Mode Buttons!

Creating Codebox for Blog Posts will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

codebox for blogger with click to copy

Let's look at this demo.

Important!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 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)}

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 7: Paste the following HTML and Javascript just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.

<div id='tstNtf' class='tNtf'></div>
<script>
/*<![CDATA[*/
/* Toast */ function toast(e){var tNotif = document.getElementById('tstNtf'); if (tNotif != null && e){tNotif.innerHTML = '<span>' + e + '</span>'}};
/*]]>*/
</script>

Again don't add it if you already have added it.

Adding Codebox Codes

Step 8: Search for the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* 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 &lt;/body&gt;.

<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>&lt;!--[ Code Box 1 ]--&gt;</pre>
</div>

<div class='cBx'>
<pre>&lt;!--[ Code Box 2 ]--&gt;</pre>
</div>

<div class='cBx'>
<pre>&lt;!--[ Code Box 3 ]--&gt;</pre>
</div>

Source:
www.houseofblogger.com

You Can Read This Post :
Hey there! My name is Samir, a Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

Post a Comment

Tᴇᴄʜʏ sꫝᴍɪʀ's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Created By

Techly420.co

All Posts are Protected By DMCA.
Reproduction in Any Form is Strictly Prohibited!

© Techly420. All rights reserved. Created byTechly420
Go Up