Kopyalama ve Karanlık Mod Düğmeleri ile Codebox Yapma

Bildirim Kodları Ekleme

Şimdi kodu arayın ]]></b:skin> ve aşağıdaki CSS Kodlarını hemen üstüne yapıştırın.

123456
/* 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)}

Aşağıdaki HTML ve Javascript'i <body> etiketlemek için hemen aşağıya yapıştırın.

123456
<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>

Codebox Kodları Ekleme

Kodu arayın ]]></b:skin> ve aşağıdaki CSS Kodlarını hemen üstüne yapıştırın.

123456789101112131415
/* 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}

Aşağıdaki Javascript'i </body> etiketin hemen üstüne yapıştırın.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
<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>

Şimdi, Codebox'ı eklemek istediğiniz her yerde HTML görünümü aracılığıyla Blog Yazılarınızda aşağıdaki HTML Kodlarını kullanın.

1234567891011
<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>

1
DEMO