How to Add Code Box in Blogger ?

Hello Everyone, in this tutorial I will share with you all How to Add Stylish Code Box in Blogger. If we are going to create a programming tutorial
How to Add Code Box in Blogger

Hello Everyone, in this tutorial I will share with you all How to Add Stylish Code Box in Blogger. If we are going to create a programming tutorial blog, we need to automatically create a post to display scripts for HTML, CSS, JavaScript and other scripts. To make our blog look neat and great, we need a script box or text box. In addition, readers can also distinguish which are articles or scripts, if you want to install this code box on your blog, please read the post till the end.

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.

Some Features of This Code Box :-

  • New Stylish Professional Design.
  • This Code Box Design 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 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=''%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 on 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>

Preview of This Code Box :-

How to Add Code Box in Blogger

Conclusion :-

In this post I have shared tutorial on How to Add Stylish Code Box in Blogger. I hope this tutorial can be useful for all Professional and Beginners Bloggers. Thank you for visiting our website.

Refrence :

About the Author

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Buy me a Coffee


  1. Great Post.

    1. Thanks
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.