Two ways to add code block in blogger template for composing posts

How to add code block into blogger template for composing posts

Blogger blog is very good for a newbie blogger starter who wants to share his or her thoughts. Blogger blog doesn’t cost a penny. On the other hand, the great opportunity is editing theme or templates style option according to our choice. There are following useful steps to add effective code block in blogger theme with two ways:

Way1

Step1: Login to your blogger on Dashboard  >>  Theme  >>

Step2: Then click on the Customize button

Step3: Now a window will open then click on Advanced  >>  Add CSS

Step4: A box will open, then Add the following css source code in the block area and click on the Apply button to enable style in your blog

//copy css source code

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

Step5: Click Save theme button to activate this blogger post, remember when you're composing your post goes to HTML and you should add the following tags:

<div class="code">

Your code here…

</div>

Way2 

Step1: Login to your blogger on Dashboard  >>  Theme  >>

Step2: Then click on the Edit HTML button

Step3: New a Template HTML will open >>  click anywhere then press keys CTRL +  F to find

Step4: A search box will appear on the right top, then input this keyword "<b:skin " then paste the following source code in <b:skin>...</b:skin> tags with a new line.

Example

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

//copy css source code

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

Step5: Click Save theme button to activate this blogger post, remember when you're composing your post goes to HTML and you should add the following tags:

<div class="code">

Your code here…

</div>