Hallo guys, kali ini admin Mrchllaja akan membagikan artikel Codebox Dengan Tombol Copy Dan Download untuk kalian.
Untuk melihat tampilan Codebox nya kalian bisa klik tombol dibawah ini.
Cara Memasang Codebox
Ikuti langkah - langkah yang ada dibawah ini agar widget berjalan dengan benar.
Penting!
Sebelum memulai, disarankan untuk mencadangkan template blogger kalian. Jika terjadi kesalahan kalian bisa memulihkan template kalian.
Langkah 1: pergi ke Dashboard Blogger
Langkah 2: klik Tema
Langkah 3: pilih Edit HTML
Langkah 4: salin kode dibawah ini, lalu paste diatas kode </style>
atau ]]></b:skin>
/* CodeBox CSS */ .pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto} .pre pre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} .pre.adv{border-radius:10px} .pre.adv::before{display:none} .pre:not(.str) .prCd{display:none} .pre.str .prTl{display:none;} .pre.adv pre{padding-top:60px} .preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2} .preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;} .preA{display:flex;gap:8px;white-space:nowrap;} .preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .preA button:hover{border-radius:40%;} .preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;} .pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s} .pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0} .pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0} @keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}} @-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
Jika template anda memiliki fitur DarkMode, tambahkan css dibawah ini. Sesuaikan (.drK) dengan css darkmode template kalian agar bisa berfungsi.
.drK .preM{background:#303031}.drK .preA button{background:#252526}.drK .preA button svg{fill:#d5d5d5}
Langkah 5: jika sudah, salin kode dibawah ini, lalu tempel diatas kode </body>
atau </body>
<script>/*<![CDATA[*/ 0<document.querySelectorAll('div.pre.fd').length&&(() => { let preD = document.querySelectorAll('div.pre.fd'); function saveDoc(x, d, n) { if (n = typeof n == 'string' ? n : 'text/plain', d = typeof d == 'string' ? d : 'File_' + (new Date).getTime() + '.txt', x) { n = new Blob([x], { type: n }); if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d); { let x = window.URL.createObjectURL(n), c = document.createElement("a"); c.classList.add('hidden'), c.href = x, c.download = d, document.body.appendChild(c), c.click(), c.remove(), window.URL.revokeObjectURL(x) } } } for (let r = 0; r < preD.length; r++) { let b = preD[r]; b.classList.add('adv'); let x = b.dataset.text || 'File_' + (new Date).getTime(), e = b.dataset.file || x, _ = b.dataset.lang || '.txt', m = 'undefined' !== typeof b.dataset.time ? isNaN(Number(b.dataset.time)) ? 'false' === b.dataset.time ? 0 : 10 : Number(b.dataset.time) : 10, c = 'undefined' === typeof b.dataset.download || b.dataset.download == 'true', d = 'undefined' === typeof b.dataset.copy || b.dataset.copy == 'true', n = 'undefined' === typeof b.dataset.view || b.dataset.view == 'true', a = b.querySelector('pre'), t = a.innerText; b.insertAdjacentHTML('afterbegin', "<div class='preM'><div class='preT'><span class='prTl'>" + (null == x ? '</>' : x) + "</span><span class='prCd'></span></div><div class='preA'>" + (n ? '\x3C!--[ Prev' + "iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>" : "") + (c ? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>" : "") + (d ? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>" : "") + '</div></di' + "v>"); let i = b.querySelector('.prVw'), l = b.querySelector('.prDl'), f = b.querySelector('.prCp'), W = b.querySelector('.prCd'); null !== i && i.addEventListener('click', () => { var x = '#252526'; x = '<!DOCTYPE html><html><head><title>' + e.replace(/\./g, "").replace(/ /g, "_") + _ + "</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" + x + "' name='theme-color'/><meta content='" + x + "' name='msapplication-navbutton-color'/><meta content='" + x + "' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://cdn.jsdelivr.net/gh/Pagodaimedia/cdn@master/favicon/android-icon-192x192.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" + a.outerHTML + '</div></body></html>'; x = new Blob([x], { type: 'text/html' }); window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(blobObject, fileName) : (x = window.URL.createObjectURL(x), window.open(x, '_blank'), window.URL.revokeObjectURL(x)) }), null !== l && l.addEventListener('click', () => { l.disabled = !0; let c = m; b.classList.add('pnd', 'str'), W.innerHTML = 0 !== m ? 'Please wai' + "t " + c + 's...' : 'Please wai' + 't...'; let a = setInterval(() => { 0 !== m && --c, 0 !== m && (W.innerHTML = 'Please wait ' + c + 's...'), c <= 0 && (clearInterval(a), setTimeout(() => { W.innerHTML = 'Downloading...', setTimeout(() => { b.classList.remove('pnd'), b.classList.add('dwn'), saveDoc(t, e.replace(/\./g, "").replace(/ /g, "_") + _, 'text/plain'), W.innerHTML = 'Download started...', setTimeout(() => { b.classList.remove('dwn', 'str'), l.disabled = !1 }, 3e3) }, 2e3) }, 1e3)) }, 1e3) }), null !== f && f.addEventListener('click', () => { var x = getSelection(), c = document.createRange(); c.selectNodeContents(a), x.removeAllRanges(), x.addRange(c), document.execCommand('copy'), x.removeAllRanges(), f.disabled = !0, b.classList.add('cpd'), setTimeout(function() { b.classList.remove('cpd'), f.disabled = !1 }, 3e3) }) }})(); /*]]>*/</script>
Pada Bagian Yang Ditandai, Ubah menjadi URL Gambar yang anda ingin Jadikan Favicon CodeBoxnya
Jika sudah semua klik simpan.
Cara Menggunakan Codebox
Salin kode dibawah ini, lalu tempel dimanapun kalian ingin menampilkan Codebox tersebut.
<!--[ Codebox ]--> <div class='pre fd notranslate' data-text='Display Name' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'> <pre><!-- Your Codes Here --></pre> </div>
Keterangan | Bawaan | Ganti Menjadi |
---|---|---|
data-text |
Display Name |
Nama Kode Anda |
data-file |
filename |
Nama File Code kamu yang Akan Diunduh |
data-lang |
fileformat |
Format Kode Kamu, Misalnya .html, .css, .js, dll |
data-time |
true |
Penghitung mundur Waktu Unduh, Ganti dengan false jika ingin Menonaktifkannya |
data-download |
true |
Ganti menjadi false jika ingin Menonaktifkan Tombol Unduh |
data-copy |
true |
Ganti menjadi false jika ingin Menonaktifkan Tombol Salin |
data-view |
true |
Ganti menjadi false jika ingin Menonaktifkan Tombol Buka Kode Dihalaman Baru |
Sekian, artikel Codebox Dengan Tombol Copy Dan Download ini, semoga bermanfaat bagi kalian. Dan terimakasih sudah berkunjung.
Apa Reaksimu Setelah Membaca Artikel Ini?