Phản hồi email
Nhập Thông Tin
Giới Tính
Send

Tạo hộp mã có nút Sao chép và Chế độ tối

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ộp mã cho blogger với nhấp chuột để sao chép

Hãy nhìn vào bản demo này.

Quan trọng!Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ, nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 1: Trước hết Đăng nhập vàoTrang 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.

Thêm mã thông báo bánh mì nướng

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin>và dán các Mã 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 7: Dán HTMLJavascript sau vào ngay bên dưới để <body>gắn thẻ. 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ã hộp mã

Bước 8: Tìm kiếm mã ]]></b:skin>và dán các Mã CSS sau ngay trên vào 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 7: Dán thẻ Javascript sau vào ngay phía 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>

Đã xong! Bây giờ, hãy sử dụng các 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>
See Also :
ModMobile

Subscribe YouTube ModMobile