Blog iTeam OS

Hướng dẫn tạo button Codebox Sao chép và Chế độ Dark Mode

Tạo Codebox cho Bài viết trên Blog sẽ không yêu cầu nhiều kiến ​​thức về HTML, CSS hay JS vì tôi đã thiết kế sẵn cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn.

Hướng dẫn tạo button Codebox Sao chép và Chế độ Dark Mode
Hướng dẫn tạo button Codebox Sao chép và Chế độ Dark Mode

Hướng dẫn tạo button Codebox

  • Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.
  • Bước 2: Trên Bảng điều khiển Blogger, nhấp vào Chủ đề .
  • Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'tùy chỉnh'.
  • Bước 4: Nhấp vào Chỉnh sửa HTML , và bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán code CSS sau ngay trên vào nó.

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

Lưu ý rằng chúng tôi đã sử dụng các Mã CSS ở trên trong các bài viết trước. Nếu bạn đã thêm nó trong Theme XML của mình, thì hãy bỏ qua bước này và làm theo các bước tiếp theo.

Bước 6:  Dán  thẻ Javascript sau vào  ngay trên  </body> .Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp  &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>

Một lần nữa, đừng thêm nó nếu bạn đã thêm nó.

Thêm mã Codebox

Bước 7: Tìm kiếm mã]]></b:skin> và dán các Mã CSS sau vào ngay trên với nó.

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

Bước 8:  Dán  thẻ Javascript sau vào  ngay trên  </body> . Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp  &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>

Vậy là xong! Bây giờ, hãy sử dụng các Mã HTML sau trong Bài đăng trên Blog của bạn thông qua chế độ xem HTML ở bất kỳ nơi nào bạn muốn thêm Hộp mã.

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

Truy cập Bypass Google Account APK để tải file APK nhé