How To Share Codes Into Blogger Post - Google Blogspot.

Trying to Share Code on a blog post? but unable to do? Don't worry because I am here to help you. So, Today I am going to show you how to share Codes on your blog post. If you share the Codes into a code box it would look stylish, beautiful and it will help visitors to read and copy that code easily. Without further delay let's get into the topic.

How To Add Code Box On Blogger:
There are two different ways to add code box on blogger. The first one is to add code on the blogger theme and another one is to add code on additional CSS page. I will show you both methods. However, the second one is very simple and easy.
First Method:
1. Login to Blogger Dashboard
2. Then click on Theme >> Edit HTML
3. Click anywhere on the code area and press Ctrl + F. Search box will open.
4. Now search for ]]<b/:skin>
5. Just above the ]]<b/:skin> paste the below-given code.
You need to paste 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 >> Customize
3. Now click on Advanced
4. Then click Add CSS
5. Paste 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 paste 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.

Note: If you want to share HTML Codes using the methods above, you will need to encode the HTML Code with the HTML encoder. You can use the website link given below to encode HTML Codes easily.
opinionatedgeek.com
accessify.com