Join our telegram group here. Join Now!

Guide to make automatic codebox !

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Welcome to my blog Freeplay!
Today the topic is Guide to make automatic codebox !! Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!

Hello there!
  Hello! Want to make like this codebox? Don't worry. We are here.
Hope you didn't redirect from the SR7Themes article as I believe there are obviously my ardent followers.
This codebox though is a functionality of Plus UI but others have already written an article on using it in Median UI. And the funniest thing is we are going to implement it!
  1. First of all paste the css before <style>
    /* Codebox CSS */
    .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: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 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

  2. Then paste the javascript before </body>
    <script type='text/javascript'>/*<![CDATA[*/
    /* Codebox JS Exclusive by Freeplay */
    /* Compressed by UgilifyJS3 Wrapped 38.4 bytes */
    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/[email protected]/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,{}));

  3. Now it would automatically change by default all your codeboxes to this type. No need to add any extra syntax or anything !!

  4. Demo

    View Demo


    I expressed my views on the topic 'Guide to make automatic codebox !'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.


About the Author

Hey, I am Soumyabrata Mukherjee! I am a student, professional blogger as well as an UI designer from Dhanbad, Jharkhand. My blogs are Freeplay and Freewit. You can hire me in business to improve its working and management.


  1. Bro how to use
    1. Good tutorial
    2. Thanks for dropping by!
Comments are moderated. To avoid SPAM comments, we are doing so.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.