Code Box
The script box is a box that may be somewhat customised using CSS and scripts or HTML elements to seem appealing and appealing to blog readers while they are comfortable watching the script. Generally speaking, HTML and CSS were utilised to create this code box; JavaScript was not used. Use of this code box is absolutely necessary, particularly if you are a blogger with a niche site or programming.
Some Features of This Code Box:-
- New Stylish Professional Design.
- This Code Box Design is Like macOS Tab.
- Code Box Name Support.
- This Code Box Design With Only Html and CSS.
How to Add Stylish Code Box in Blogger:-
Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login to Your Blogger Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Copy The Given Css Code and Put it Above The
]]></b:skin>./* Stylish Code Box Css By Www.SmartTechMukesh.Com */
.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);margin:0 auto;position:relative;font-family:'source code pro',menlo,consolas,monaco,monospace;background:#0a3d62;color:rgba(255,255,255,.6);overflow:hidden;padding:50px 15px 15px 15px;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:scroll;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}pre::before{content:attr(title);font-weight:500;border-radius:4px 4px 0 0;text-align:left;color:#fff;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' fill='%23fff'/%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}mark{background-color:#ff4757;border-radius:2px;padding:0 4px;color:#fff}.spoiler-amp{margin:10px 0}.spoiler-amp h4.spoiler-button{color:#222;font-size:14px;font-weight:500;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}amp-accordion section{margin:10px 0}.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}Note :- Completely Remove All Css Like .pre .code From Your Template.
Step 6 :- Then Don't Forget To Click on Theme.
How To Add This Code Box in Blog Posts:-
Open the above tool and a tool will appear in front of you. Using this tool you can parse your code. Paste your code in the text box and click on Parse and now your code is done parsing now copy the parsing code. Now open your post and click on post HTML view and add your parse code as follows.
<pre><code>Your Code Here</code></pre>Now how can you add your code name on the codepan icon shown in the code box? Adding your code names is easy enough, just adding title="Code Name Here" to the pre-code in the HTML of the code box.
<pre title="Your Code Name"><code>Your Code Here</code></pre>Refrence :
Www.SmartTechMukesh.Com