How to make Automatic Codebox in blogger

Hello, Bloggers! Welcome to Raghavendra Technic.

In this tutorial, we are going to show you How to make Codebox in blogger

a codebox with a nice Copy and Download Code button for Blogger. This trick uses HTML, CSS, and JavaScript.

Doing

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.

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

/* Codebox by (T.MK) */ .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)}}

Now we are going to use automatic .js

Step 6: Now search the code </body> and paste the following Codes just above to it.

<script type='text/javascript'>/*<![CDATA[*/
/* Codebox JS Exclusive by (T.MK) */ eval(function(e,n,t,r,i,o){if(i=function(e){return e.toString(34)},!"".replace(/^/,String)){for(;t--;)o[i(t)]=r[t]||i(t);r=[function(e){return o[e]}],i=function(){return"\\w+"},t=1}for(;t--;)r[t]&&(e=e.replace(new RegExp("\\b"+i(t)+"\\b","g"),r[t]));return e}("7 4(a){1 b=2.8('9');b.c=a;2.d.e(b)}4('f://g.h.j/k/l/m@n/o/p/5/6.q.5');1 3=2.r(\"s.6\");t(1 i=0;i<3.u;i++){3[i].v.w(\"x\")}",0,34,"|var|document|element|loadJs|js|pre|function|createElement|script|||src|head|appendChild|https|cdn|jsdelivr||net|gh|fineshopdesign|blogger|main|assets|codeBox|min|querySelectorAll|div|for|length|classList|add|fd".split("|"),0,{}));
/*]]>*/</script>

Then create a static page on the blog and paste the following code in HTML writing mode.

<div class="pre tmk"> 
 <pre>
  <!--[ Enter your Codes here ]-->
 </pre>
</div>

Step 7: Now click on Save by clicking this icon

Step 8: That's done!

---

Credit

Created by :
Freeplay

Conclusion

In this article I have made a tutorial on How to make Codebox in blogger. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com