How to insert code block or syntax in blogger

In this article you will learn how to add code block or syntax in your blogger. Computer Science students knows that what is syntax, for those who don't know what is syntax or code block (In context of programming languages : Syntax is the set of rules and principles that governs the structure of sentences in a particular languages.)



First I will show you that what I am going to do. In the given below image we have a code block and this code has been mixed with content. Here I need to show this code in a box with such a pretty format.

To do so we have two method, In first one we create a code block container with scroll bar and in method two we create a box with out scroll bar.

Code block container with scroll bar

 

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

Code block container without scroll bar

 

.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; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

1- Copy your desired code (with scroll/without scroll)
2- Sign In to your Blogger account. (https://www.blogger.com/).
3- Navigate to your blogger's dashboard and choose your desired blog which you want to customise.
4- Now in the left menu click on "Theme" and also click an orange button "Customise" under live on Blog.
5- The Blogger Template Designer will open.
6- In the left side menu click on "Advance" and scroll down to select "Add CSS" option.

7- Click on "Add Css" button and paste copied code in text box area and click on "Apply to blog" to save your changes.

8- Now the question is how to use this code, the answer is whenever we create a post and a post has code or syntax than we need to write that code under following div.

<div class="code">
Paste your code/syntax here
</div>

9- Save your post and preview, you will see that your code are now in much pretty format. If you have any issue please comment.