How to Make Stylish Codebox for Blog Posts.

Hello! Welcome to Finestap Design.

If you have ever provided codes to your visitors, then you must have needed a Codebox. That is why in this article we will create stylish Codebox. With its help, you will be able to provide codes to your visitors in a Stylish Codebox.

How to Make a CodeBox?

Creating Codebox for Blog Posts will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

/* Code Box */
.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)}}

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

<script>/*<![CDATA[*/
/*!Code Box by Finestap Blog*/
const codeBox = {
      img: "https://finestap-design.blogspot.com/favicon.ico", /* Your favicon url */
      title: "_by_Finestap_Blog" /* Your blog title */
};
/* Code_Box@main.js */ 0<document.querySelectorAll("div.pre.cdBox").length&&(()=>{let e=document.querySelectorAll("div.pre.cdBox");function t(e,t,a){if(a="string"==typeof a?a:"text/plain",t="string"==typeof t?t:"File_"+(new Date).getTime()+".txt",e){if(a=new Blob([e],{type:a}),navigator.msSaveBlob)return navigator.msSaveBlob(a,t);{let e=window.URL.createObjectURL(a),l=document.createElement("a");l.classList.add("hidden"),l.href=e,l.download=t,document.body.appendChild(l),l.click(),l.remove(),window.URL.revokeObjectURL(e)}}}for(let a=0;a<e.length;a++){let l=e[a];l.classList.add("adv");let n=l.dataset.text||"File_"+(new Date).getTime(),s=l.dataset.file||n,d=l.dataset.lang||".txt",i=void 0!==l.dataset.time?isNaN(Number(l.dataset.time))?"false"===l.dataset.time?0:10:Number(l.dataset.time):10,o=void 0===l.dataset.download||"true"==l.dataset.download,r=void 0===l.dataset.copy||"true"==l.dataset.copy,c=void 0===l.dataset.view||"true"==l.dataset.view,p=l.querySelector("pre"),m=p.innerText;l.insertAdjacentHTML("afterbegin","<div class='preM'><div class='preT'><span class='prTl'>"+(null==n?"&lt;/&gt;":n)+"</span><span class='prCd'></span></div><div class='preA'>"+(c?"\x3c!--[ Preview ]--\x3e<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>":"")+(o?"\x3c!--[ Download ]--\x3e<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>":"")+(r?"\x3c!--[ Copy ]--\x3e<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></div>");let v=l.querySelector(".prVw"),L=l.querySelector(".prDl"),w=l.querySelector(".prCp"),u=l.querySelector(".prCd");null!==v&&v.addEventListener("click",(()=>{var e="#252526",t=codeBox.img;e="<!DOCTYPE html><html><head><title>"+s.replace(/\./g,"").replace(/ /g,"_")+d+"</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='"+e+"' name='theme-color'/><meta content='"+e+"' name='msapplication-navbutton-color'/><meta content='"+e+"' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='"+t+"'><style>body{min-height:100vh;background:#fff;color:#000}*{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:12px}pre i{font-style:normal}</style></head><body><div class='pre'>"+p.outerHTML+"</div></body></html>",e=new Blob([e],{type:"text/html"}),window.navigator.msSaveOrOpenBlob?window.navigator.msSaveOrOpenBlob(blobObject,fileName):(e=window.URL.createObjectURL(e),window.open(e,"_blank"),window.URL.revokeObjectURL(e))})),null!==L&&L.addEventListener("click",(()=>{L.disabled=!0;let e=i;l.classList.add("pnd","str"),u.innerHTML=0!==i?"Please wait "+e+"s...":"Please wait...";let a=setInterval((()=>{0!==i&&--e,0!==i&&(u.innerHTML="Please wait "+e+"s..."),e<=0&&(clearInterval(a),setTimeout((()=>{u.innerHTML="Downloading...",setTimeout((()=>{l.classList.remove("pnd"),l.classList.add("dwn"),t(m,s.replace(/\./g,"").replace(/ /g,"_")+codeBox.title+d,"text/plain"),u.innerHTML="Download started...",setTimeout((()=>{l.classList.remove("dwn","str"),L.disabled=!1}),3e3)}),2e3)}),1e3))}),1e3)})),null!==w&&w.addEventListener("click",(()=>{var e=getSelection(),t=document.createRange();t.selectNodeContents(p),e.removeAllRanges(),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),w.disabled=!0,l.classList.add("cpd"),setTimeout((function(){l.classList.remove("cpd"),w.disabled=!1}),3e3)}))}})();
/*]]>*/</script>

Step 6: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.

Step 7: Save the changes by clicking on this icon

That's done! Now use the following HTML Codes in your Blog Posts wherever you want to add Codebox.

<div class='pre cdBox' data-text='type' data-file='file_name' data-lang='file_format' data-time='true' data-download='true' data-copy='true' data-view='true'>
  <pre>
      <!-- Code -->
  </pre>
</div>

Step 8: That's done!

Ngochaidz

Search Suggest

How to Make Stylish Codebox for Blog Posts.

How to Make a CodeBox?

Bạn có thể thích những bài đăng này

Đăng nhận xét

Make Category Posts Widget for JagoDesain Themes with AJAX using Vanilla Javascript

Prefer UI