Blogger/Website Code Box with Copy and Dark Mode Buttons

Blogger/Website Code Box with Copy and Dark Mode Buttons


Blogger/Website Code Box with Copy and Dark Mode Buttons


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

  /* 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();
            toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
            setTimeout(() => {
            }, 2000)

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 class='cBx'>
  <pre>&lt;!--[ Code Box 2 ]--&gt;</pre>

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

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

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.