|
| How to Create a Code Frame With a Beautiful Copy and Download Button for Blogger |
You must have seen many types of Code Box on many websites, but today the code box with beautiful frame that I am going to give you is very wonderful and very helpful
Benefits of New Download Button
The main advantages of this code box are given below
In this code box, you will get a separate copy button to copy it in one clickA special button will also be available to download in one click in the code box. Along with this, you will also get a separate option to open the code given in a separate page in one click.
Put Code Frame in blogger
To put the code frame in blogger, I am providing you 2 codes , with the help of which we have to make this code box provideFirst of all
- First of all BloggerLogin and click on theme and click on edit html.
- Remember to backup your blogger theme before editing.
now cntrl+F press by doing </body> to the code search Do it and on the code below Double click Copy this </body> Right above the code paste do it
In the last theme to save do it
<script>/*<![CDATA[*/
/* JavaScript Code Source Aveestb.xyz */
0<document.querySelectorAll('div.pre.nb').length&&(() => {
let preD = document.querySelectorAll('div.pre.nb');
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://www.nldblog.com/main/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, "_") + '_by_NLD_Blog' + _, '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>
Now back to you theme script and Customize Click on
now advance on Click by doing add CSS Click on and all below code By copying the add CSS in paste by doing save to do
/* Css Code Source Aveestb.xyz */
.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)}}
How to put Code Frame in blogger post
Blogger Post/Page code in frame to apply the code below copy Keep doing it.
Now wherever you are cod box You put this code paste Do and in it <!-- Code -->Receive code on itpaste Put it in a blog post/page.
<div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'>
<pre>
<!-- Code -->
</pre>
</div>
Check to you post preview Check it.