How To Add Code Box In Blogger Post

 How To Add Code Box In Blogger Post

 Note: If you find blur picture then tap on the picture and zoom it.

● First, you have a login to your blogger account.

● Go to your Blogger dashboard.

● Click on Theme at the right column of the dashboard.

● Now click on three vertical dots icon ⋮

● On the Theme page, click on Edit HTML.

● Click anywhere on the HTML code area.

● Press the Ctrl + F on your keyboard keys to open the search box.

● Copy the code given below code and paste it on the search box or write a given below code.

]]></b:skin>

● After adding code on Search Box you have to press Enter.

● Now copy the given below code and paste this code above " ]]</b:skin> ".

.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;

}

● You can also change Border Pixels, Border Color, Color Inside the Box.

● For this, go to google and search for Html color code then select your color and replace it with your current color.

● Press on Save Theme. You are done code box has been added to your blogger.

How To Use In Blogger Post

Now the thing that comes into your mind is that how to add code in blogger posts.

● It is quite simple just go to the Post section click on New Post.

● Type whatever you want and in order to add code box click on the HTML button in the blogger editing section.

● Paste the given below code where you want to add code box.

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

● After paste, the above code replaces " Paste Your Code Here " with your HTML/CSS/JAVA/PHP or whatever code you want to add in the blogger post.

● After this just click on Publish.

● Here you can see I have added a code box in my blogger post.

Limitation:

● Remember if the first letter of your code includes the right angle bracket that is ' < ' then code box will not render in your blogger post you have to raw HTML to the escaped HTML. You can convert this with the help of tools on google.

● But this happens by chance so don't worry.