How to Add Codes in Blogger Post by Creating Code Box

Steps to add code box in blogger:

• Go to the Dashboard of your blog and select Template.
  
•  Click on Customize.
  
• From the new window select Advanced and click on Add CSS.
• Copy-Paste the below codes in the CSS empty box and apply to the blog.

.code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

Now, when you will add codes in a post at that time go to HTML and put your codes between the following tags-

<div class="code">
Your Codes
</div>

If you do so then your code will look like this-

{Your Code Should be Here}

Notice:

• If your codes posses characters like right angle brackets ie, <  then to render that correctly you have to convert raw HTML to escaped HTML, otherwise you can't be able to render codes inside the box. You can convert your raw HTML to escaped HTML here. Best of luck with your work.