How To Add Code Box On Blogger Post

Trying to Share Code Snippet on a blog post? But unable to do so, Don't worry because I am here to help you.
So, Today I am going to tell you how to add a code snippet on your blog post. If you are a blogger and have a blog about programming or for helping other bloggers you would need maximum times to share code snippet with your visitors. How would it look if you share that code snippet in a separate box? Exactly it would look stylish, beautiful and it will help visitors to read and copy that code easily.

How To Add Code Box On Blogger.

There are two different ways to add code box on blogger.

First one is to add a code snippet on blogger theme and another one is to add code on additional CSS page. I will tell you both methods however the second one is very simple and easy.

First method.  

1. Login to Blogger Dashboard

2. Then click on Theme > Now Click >Edit HTML

3. Click anywhere on the code area and press Ctrl + F. Search box will open.

4. Now wright or past " ]]<b/:skin> " on the search box and hit the enter button on your keyboard.

5. Just above the " ]]<b/:skin> " past the below-given code. 

You need to past only one of them if you will add both the given codes you will get an error.

Code 1. If you want to add code with scroll add the following code.

.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 2. If you want to add code without Scroll add the following code.

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

6. Now Save the template and that's all you are done

Second Method (Recommended)

1. Login to Blogger Dashboard

2. Click  on Theme > Now Click > Customize

3. Find Advanced option on the top left of the screen and hit that button

4. Then click Add CSS

5. Past one of the above-given codes and click the Apply To Blog button.

6. Now you are done.

How To Use This

In order to use this just follow the below steps.

1. To use this just click on the HTML  of your blog post editor.

2. Now write or past the below-given code in your blogger post editor.

<div class="code">
Enter Your Code Here
</div>

3. Replace "Enter Your Code Here" with the code you want to share.

4. Publish your post and see the magic of CSS.

So, friends, this was the post about how to add code box on blogger post. Hope you like the post. If you have any issue please comment below the post or you can contact me using either Contact Me page or Contact form. 

Read More