Hello guys , Today I am going show you how to create custom script or code box with automatic copy button and Modern Design...
What is Code Box?
The script box is a box that can be slightly designed using CSS created with scripts or HTML tags to make the script box look colorful and attractive to attract blog visitors comfortably while viewing the script. In general, this code box is made with the help of HTML and CSS, no JavaScript has been used in it. The use of this code box is very essential especially if you are a blogger with a specific blog or programming.
Features of this Code Box
This Code box has a lot of awesome features and highly customisable..
- Totally Responsive
- Copy Button automatically inserts in all code box
- Custom title
- Made with Css and lightweight Javascript (for copy button).
Installation and Usage
Installation
Adding Css
- Go Themes section then, Click on Edit Html.
- Now search for </b:skin> and paste the below Css just above it.
/* Modern Code Box by K K UPGRADER*/
.post-body code.code,span.quot{background:#312b4a;box-shadow:inset 0 1px 4px #2a2542;padding:2px 5px;border-radius:3px;color:#fff;font-size:15px;white-space:normal;letter-spacing:-0.3px}
.post-body code.code1,.post-body code.code2{background:#242038;border-left:4px solid #fda80c;padding:8px 10px;margin:20px auto;display:block;overflow:auto;border-radius:2px;white-space:nowrap;font-size:12px;line-height:1.5em;color:#dada8c}
.post-body code.code2{border-left:0;border-radius:4px}
.post-body code ul li{border:none;padding:2px 0}
.post-body code ul{padding:0 20px}
pre{box-shadow:0 -20px 20px -20px rgba(0,0,0,.054);z-index:-999999 margin:20px auto;position:relative;font-family:'source code pro',menlo,consolas,monaco,monospace;background:#0a3d62;color:rgba(255,255,255,.6);overflow:hidden;padding-top:40px;border-radius:4px;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-ms-word-break:normal;word-break:normal;word-break:normal;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;}
pre code{font-size:12px;box-shadow:none;padding:0;background:0;white-space:pre;display:block;overflow-x:auto;max-width:100%;min-height:60px;max-height:280px;line-height:1.5em;}
pre::before,pre::after,pre code::before,pre code::after{position:absolute}
pre::after,pre code::before,pre code::after{content:'';width:20px;height:20px;border-radius:50%;top:10px;background:transparent!important}
pre::before{content:attr(title);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight:500; font-family:"Roboto Slab";border-radius:4px 4px 0 0;text-align:left;color:#fff;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' style='enable-background:new 0 0 512 512;' xml:space='preserve' width='512' height='512'%3e%3crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3e%3cg class='currentLayer' style=''%3e%3ctitle%3eLayer 1%3c/title%3e%3cg id='svg_1' class='' opacity='0.96' filter='' fill='%23ffffff' fill-opacity='1'%3e%3cg id='svg_2' opacity='0.96' filter='' fill='%23ffffff' fill-opacity='1'%3e%3cg id='svg_3' opacity='0.96' filter='' fill='%23ffffff' fill-opacity='1'%3e%3cpath d='M465.31290705550305,34.62000000861573 H35.972794216042644 C14.133205771154053,34.62000000861573 -3.5714285390318565,52.59281401029515 -3.5714285390318565,74.76321607092308 v45.62911284828186 c0,3.166336237549782 2.5292334728837016,5.734889161229134 5.649316539943218,5.734889161229134 h497.12992526972295 c3.1210760915875433,0 5.649316539943218,-2.5675448573827744 5.649316539943218,-5.734889161229134 V74.76321607092308 C504.8571298105775,52.59281401029515 487.15249550039164,34.62000000861573 465.31290705550305,34.62000000861573 zM67.73269769591678,93.31365206054139 c-7.040543903708458,0 -12.746462841749192,-5.793357006430626 -12.746462841749192,-12.939538982868195 c0,-7.145173910140992 5.70691196256876,-12.939538982868195 12.746462841749192,-12.939538982868195 c7.039550879180432,0 12.746462841749192,5.793357006430626 12.746462841749192,12.939538982868195 C80.48015356219399,87.52029505411076 74.77324159962524,93.31365206054139 67.73269769591678,93.31365206054139 zM108.59764307326662,93.31365206054139 c-7.040543903708458,0 -12.746462841749192,-5.793357006430626 -12.746462841749192,-12.939538982868195 c0,-7.145173910140992 5.70691196256876,-12.939538982868195 12.746462841749192,-12.939538982868195 s12.746462841749192,5.793357006430626 12.746462841749192,12.939538982868195 C121.34410591501583,87.52029505411076 115.63719395244706,93.31365206054139 108.59764307326662,93.31365206054139 zM149.4625884506165,93.31365206054139 c-7.039550879180432,0 -12.746462841749192,-5.793357006430626 -12.746462841749192,-12.939538982868195 c0,-7.145173910140992 5.70691196256876,-12.939538982868195 12.746462841749192,-12.939538982868195 c7.040543903708458,0 12.746462841749192,5.793357006430626 12.746462841749192,12.939538982868195 C162.20905129236567,87.52029505411076 156.50213932979693,93.31365206054139 149.4625884506165,93.31365206054139 z' id='svg_4' opacity='0.96' filter='' fill='%23ffffff' fill-opacity='1'/%3e%3cpath d='M499.20781327063423,149.06576665905405 H2.077888000911362 c-3.1190900425314902,0 -5.649316539943218,2.566536791086197 -5.649316539943218,5.734889161229134 v286.0075615986586 c0,22.170402060627936 17.70463431018591,40.14321606230736 39.5442227550745,40.14321606230736 h429.34011283946035 c21.83958844488859,0 39.5442227550745,-17.97281400167942 39.5442227550745,-40.14321606230736 V154.80065582028317 C504.8571298105775,151.63331151643683 502.32888936222184,149.06576665905405 499.20781327063423,149.06576665905405 zM157.29953802580226,372.2304753290741 c4.412007978022098,4.478838555693626 4.412007978022098,11.740948156237602 0,16.219786711931228 c-2.2065005012750625,2.2389152446985245 -5.098187926888466,3.359884966492653 -7.988882327973842,3.359884966492653 c-2.8926804501414303,0 -5.7823818266987805,-1.1189535892009737 -7.988882327973842,-3.359884966492653 l-64.99047628575563,-65.97491491210461 c-4.412007978022098,-4.478838555693626 -4.412007978022098,-11.740948156237602 0,-16.219786711931228 l64.99047628575563,-65.97491491210461 c4.412007978022098,-4.478838555693626 11.565756677925586,-4.478838555693626 15.979750705003736,0 c4.412007978022098,4.478838555693626 4.412007978022098,11.740948156237602 0,16.219786711931228 L100.29893709254848,314.36545377293515 L157.29953802580226,372.2304753290741 zM312.75951393741957,235.4570482757418 l-97.01055219197274,170.57288191127776 c-2.092302680552006,3.679441982507706 -5.889628475725651,5.736905293822288 -9.794200919926165,5.736905293822288 c-1.9175303636193275,0 -3.8598863404393198,-0.4959686179161073 -5.639386294662953,-1.5393172348737718 c-5.404039481520653,-3.166336237549782 -7.2560302262902265,-10.181469595432281 -4.134954134702682,-15.667366381406785 l97.01154521650076,-170.57288191127776 c3.1190900425314902,-5.485896785974503 10.027561684012413,-7.366948495388031 15.433587214589119,-4.197588058948517 C314.0295923087656,222.95601813188483 315.879597004479,229.9711514897673 312.75951393741957,235.4570482757418 zM424.9544041874467,322.4753471289008 l-64.99047628575563,65.97491491210461 c-2.2065005012750625,2.2389152446985245 -5.099180951416492,3.359884966492653 -7.988882327973842,3.359884966492653 c-2.8916874256134033,0 -5.7823818266987805,-1.1189535892009737 -7.988882327973842,-3.359884966492653 c-4.412007978022098,-4.478838555693626 -4.412007978022098,-11.740948156237602 0,-16.219786711931228 l57.00159395778179,-57.86502155613899 l-57.00159395778179,-57.86502155613899 c-4.412007978022098,-4.478838555693626 -4.412007978022098,-11.740948156237602 0,-16.219786711931228 c4.413001002550125,-4.478838555693626 11.564763653397561,-4.478838555693626 15.979750705003736,0 l64.99047628575563,65.97491491210461 c2.118121318280697,2.1502054105997086 3.309750751912594,5.068557339191436 3.309750751912594,8.109893355965614 C428.2641549393593,317.4077978560059 427.07351853025546,320.3241336520045 424.9544041874467,322.4753471289008 z' id='svg_5' opacity='0.96' filter='' fill='%23ffffff' fill-opacity='1'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg id='svg_6'%3e%3c/g%3e%3cg id='svg_7'%3e%3c/g%3e%3cg id='svg_8'%3e%3c/g%3e%3cg id='svg_9'%3e%3c/g%3e%3cg id='svg_10'%3e%3c/g%3e%3cg id='svg_11'%3e%3c/g%3e%3cg id='svg_12'%3e%3c/g%3e%3cg id='svg_13'%3e%3c/g%3e%3cg id='svg_14'%3e%3c/g%3e%3cg id='svg_15'%3e%3c/g%3e%3cg id='svg_16'%3e%3c/g%3e%3cg id='svg_17'%3e%3c/g%3e%3cg id='svg_18'%3e%3c/g%3e%3cg id='svg_19'%3e%3c/g%3e%3cg id='svg_20'%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter id='f012' y='-.2' width='1.2' height='1.4' x='-.1' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' inkscape:label='Fire' inkscape:menu='Protrusions' inkscape:menu-tooltip='Edges of object are on fire' color-interpolation-filters='sRGB'%3e%3cfeMorphology result='result1' radius='2.4' operator='dilate'/%3e%3cfeTurbulence baseFrequency='0.09 0.028' numOctaves='1'/%3e%3cfeColorMatrix result='result2' values='2 0 0 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3e%3cfeDisplacementMap result='result4' scale='10.319' yChannelSelector='G' xChannelSelector='R' in='result1' in2='result2'/%3e%3cfeFlood result='result3' flood-opacity='1' flood-color='%23ff9f36'/%3e%3cfeMorphology radius='3.8' result='result7' in='result4'/%3e%3cfeGaussianBlur result='result7' in='result7' stdDeviation='2.4'/%3e%3cfeComposite result='result5' in2='result4' in='result3' operator='in'/%3e%3cfeComposite operator='out' in2='result7'/%3e%3cfeOffset result='result6' dy='-7' dx='-4.5'/%3e%3cfeGaussianBlur result='result7' stdDeviation='4.8'/%3e%3cfeComposite in='SourceGraphic' in2='result6'/%3e%3cfeComposite in2='result7'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");background-repeat:no-repeat;background-position:12px center;background-size:20px 20px;background-color:rgba(0,0,0,0.15);top:0;left:0;width:100%;height:40px;line-height:40px;padding:0 38px;box-sizing:border-box}
pre::after{background-color:#ea756f;right:10px}
code::before{background-color:#b38af5;right:35px}
code::after{background-color:#81ce8e;right:60px}
[rel="code"]{white-space:pre;overflow-x:scroll;display:block;line-height:1.8;margin:10px 0;background:#1d1b2b;border-radius:4px;padding:10px}
[rel="code"]::-webkit-scrollbar,[rel="code"]:hover::-webkit-scrollbar{height:0}
.copyify{color:#fff;border-radius:0 4px 0 0;background:linear-gradient(to right,#22a7f0,#0081ff);border-color:#00ad5c;border:20px;text-transform:capitalize;display:block;margin-left:auto;margin-right:0;z-index:999999999999999;margin-bottom:-40px;height:40px;max-width:60px;box-sizing:border-box}
Adding Javascript
Now Search for </body> and paste below any of these javascript just above it.
<script async='async' defer='defer' type='text/javascript' src="https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/copy-code-box.min.js"></script>
<script async='async' defer='defer' type='text/javascript'>
function addCopyButtons(clipboard) { document.querySelectorAll('pre > code').forEach(function (codeBlock) { var button = document.createElement('button'); button.className = 'copyify'; button.type = 'button'; button.innerText = 'Copy'; button.addEventListener('click', function () { clipboard.writeText(codeBlock.innerText).then(function () { /* Chrome doesn't seem to blur automatically, leaving the button in a focused state. */ button.blur(); button.innerText = 'Copied!'; setTimeout(function () { button.innerText = 'Copy'; }, 2000); }, function (error) { button.innerText = 'Error'; }); }); var pre = codeBlock.parentNode; if (pre.parentNode.classList.contains('highlight')) { var highlight = pre.parentNode; highlight.parentNode.insertBefore(button, highlight); } else { pre.parentNode.insertBefore(button, pre); } }); } if (navigator && navigator.clipboard) { addCopyButtons(navigator.clipboard); } else { var script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js'; script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94='; script.crossOrigin = 'anonymous'; script.onload = function() { addCopyButtons(clipboard); }; document.body.appendChild(script); } function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied: " + copyText.value; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; }
</script> Customisation
- Change #0a3d62 to change the background colour of code box.
- Change rgba(255,255,255,.6) to change text colour in code box.
- Change background:url(....); to as desired svg icon to change the main code box icon..Use This tool to generate background Css from svg. SVG to Data URI converter
- Change the #fff to change text colour of copy button.
- Change linear-gradient(to right,#22a7f0,#0081ff) to change background colour of copy button.
Using Code Box in Posts
- First of all , You need to parse Your code to Xml ..For parsing Use this tool. Xml Parser
- Then paste the Parsed code inside code box.
<pre title="Your Title Here"><code>
/*Your Code Here*/
</code></pre>
If you like this Guide, do share it with your friends and Join our Weekly Newsletter in the Footer section.Thank you.🤩