How to create a code box in blogger | Code Epic

Are you wondering how to add a code box in blogger?

If yes, then this article will show you how to add a code box in the blogger post and this method is free of cost.

Reason for code box in blogger

In some posts, we want to share some code with the readers but without a code box, the code may appear ugly, hard to understand for the readers, take a lot of space in the blog, and more. If we present the code in a code box it makes the readers easily readable and copy the code and use them properly without any errors.

So let's start to add a code box in the blogger post

First, add code for the code box in the theme section

1. Log in to your blogger dashboard and navigate to the theme section

2. Now click on the down arrow button near the orange color customize button

3. From the drop-down menu click "Edit HTML"

4. Click anywhere on the HTML code area and press Ctrl+F to open the search box

5. Using the search box to find "]]></b:skin>" in the HTML area

6. Now past the given code above "]]></b:skin>" then save it

.csscode { margin : 10px 25px 10px 15px; padding : 10px; clear : both; list-style-type : none; background : #F2F7FF; border-top : 3px solid #000000; border-right : 3px solid #000000; border-bottom : 3px solid #000000; border-left : 3px solid #000000; }

Note :

you can change the background color of the code box as well as the Border Pixels and Border Color by changing the values in the code.

Click here to pick a color

Now, Let's see how to use the code box in a blogger post

It is very simple to add a code box in a blogger post now. just follow the steps to add the code box in blogger whenever you need it.

1. Go to the post section and click on "new post"

2. Type whatever you want and now click the "HTML view" option 

3. On "HTML view" find the area where you need to show the code and paste the following code in that place

<div class="csscode"> Paste Your Code Here </div>

4. Now replace "Paste Your Code Here" with your code (HTML, CSS, JAVA, PHP, And more)

5. After that Just click public 

Limitations of this method

Don't forget that if you use code that contains right angle bracket '< ', the code may don't work, to avoid this issue convert  "Raw HTML" to "escaped HTML" format with the of help any online converters.

The most important thing to do after this 

Don't forget to comment and share this article with your friends.