How To Add Code Box In Blogger Post Script - Alhankar

Today's article provides guidance on incorporating HTML & CSS or any text into your Blogger/Website, with a focus on simplicity. If you're seeking ways to stylize text within a code frame, this article offers insights into achieving just that.

A common query arises on how to seamlessly integrate this code frame into your platform. By carefully reading this piece, you'll gain the necessary know-how to effortlessly add this aesthetically pleasing code box frame to your Blogger/Website, complete with features like Copy, Share, and Download.

Advantages of the Download Button:

• Convenient one-click copying feature integrated into the code box.
• Dedicated button within the code box for effortless downloading with a single click.
• Option to open the provided code in a separate window with just one click.
• Portable, user-friendly, and SEO-friendly, making it a top choice for website integration.

Installing Code Frame on Blogger/Website:

To incorporate the code frame on Blogger, follow these steps:

• 1. Log in to your Blogger account and navigate to the theme section. Then, click on 'Edit HTML'.
• 2. Before making any changes, ensure to take a backup of your current Blogger theme.
• 3. Below, you'll find two codes to help create the code box.

Step 1 -  

Now search the </body> code by pressing cntrl+F and copy and paste it just above this </body> code by double clicking on the below code. At last save the theme.

           <script>/*<![CDATA[*/ 0<document.querySelectorAll('div.pre.pu').length&&(() => { let preD = document.querySelectorAll('div.pre.pu'); 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 ? '&lt;/&gt;' : 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVo5dBtPmL9291y0WqqPKu2lolgNXH5WEL38WmRw8QrYMXcXVi8R-X5-1vgdetS7xpPQbDsnnOqmuPIzY0mgWJcr51w-6lO7A0HTyeiNALVm-f2A_Bct7dlLEDhGPLSKuyek_EaqquogTLMiVuqN9934PgZxivF2KoOvUMyKJTYvx5ikRnDuWVEQ-j_7GS/s1600/20230826_235820.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_Tech_Ankur' + _, '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>
  
  

Step 2 - 

Now you have to go back to the theme and click on Customize. 

Now click on advance and click on add CSS and copy all the code given below, paste it in add CSS and save it.

                 /* Code Box by Lefonews*/ .pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto} 
.prepre{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 Insert Code Frame in a Blogger Post/Page? 

To integrate the code frame into a blogger post/page, simply copy and preserve the code provided below. Then, wherever you desire to position this code box, paste the code and substitute <!– Code –> with your own code within the blog post/page.

     <div class='pre pu' 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>

The code frame featuring a sleek copy and download button has now been successfully added to your Blogger post/page.

Key Information:

• Data-text specifies the type of code (e.g., CSS, HTML, or JavaScript).
• Data-file represents the download file name.
• Data-lang indicates the file format (e.g., .css, .js, .html, .txt). If unchanged, it defaults to .txt.
• Data-download toggles the visibility of the download button (true or false).
• Data-copy toggles the visibility of the copy button (true or false).
• Data-view toggles the visibility of the preview button (true or false).
• Remember, altering Data-download, Data-copy, and Data-view is optional.

<!-- Code --> Enter your code here.

Direct HTML code input here will not function. You must utilize an HTML Parser to alter the HTML code.

Conclusion:

We trust that the guide on crafting a code box featuring a stylish copy and download button for Blogger has been beneficial to you. Should you encounter any doubts or encounter challenges during the installation process, feel free to reach out to us via comments. We're here to assist you. Thank you for visiting, and have a wonderful day!

That wraps it up! Should you encounter any issues, don't hesitate to reach out to us for assistance.

Copyright © - Alhankar