How to add code block in blogger

It is good to have a code area in your blogger posts if you want to write down code, blogger widgets, blogger templates or it deals with any kind of blog customization. It will become easy for anybody to locate the html code and easily copy and paste the code for using it. It will also give a well organised look to your blog posts.
To add code block in blogger, read and follow the steps below :

1. Log in to your blogger account. Go to Dashboard >> Template.


2. Click on the Customize.


3. GO to Advanced >> Add CSS.


4. Copy and Paste the following code in the Add CSS section.

   .code {
       background: #f5f8fa;
       background-repeat: no-repeat;
       border: solid #5C7B90;
       border-width: 1px 1px 1px 20px;
       color: #000000;
       font: 13px 'Courier New', Courier, monospace;
       line-height: 16px;
       margin: 10px 0 10px 10px;
       max-height: 200px;
       min-height: 16px;
       overflow: auto;
       padding: 28px 10px 10px;
       width: 90%;
   }
   
   .code:hover {
       background-repeat: no-repeat;
   }

5. Now when you are composing new post, select HTML section and paste the following code.

   your code here

6. Continue your writing and publish