How To Add Code Box in Blogger Post?

Every blogger writes their post and articles for blogging. But, bloggers want to write their articles SEO friendly and Creative. By using code in their blog post, you must have a stylish and Scrollable Code Box for sharing any kinds of codes. Many bloggers are already have looking for good templates or themes. And some bloggers are using tricks to customize their blogs as well as possible. In this situation, some bloggers don't know how can they customize their blog and impress their blog visitors.

Scrollable Code Box is another part of the creative design of a blog post. Because It will support to their bog reader and visitors. Visitors can easily scroll the codes and can copy-paste the code which one is visitors want.

Again Non-scrollable Code Box is also needed for blog posting. Cause, sometimes some codes are very important to see the code first and can read the code easily. 

So, I share those two types of code boxes. So that you can choose one as your choice. By the way, this shareable code will you can use permanently on your blogger template or you can use the code on the blog post only.

How to Add Code Box in Blogger?

1. Log in to your blogger dashboard and select which blog you want.
2. Then Go To "Theme" > and then select "Edit HTML".
3. Then click anywhere inside the code area and press the "Ctrl + F" keys to open the Search box.
4. Write or paste "]]</b:skin>" code in the search box and press enter.
5. Just above " ]]</b:skin> " paste the code box CSS code given below:

Code 1 (With Scroll & Simple Design): For style 1 copy this code and paste above the " ]]</b:skin> "

DEMO Below ↓

CODE ↓

.code { background:#1c1b1b; background-repeat:no-repeat; border: double #1c1b1b; border-width: 1px 1px 1px 1px; color: #f9f9f9; 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 (With Scroll & Highlight Design): For style 2 copy this code and paste above the " ]]</b:skin> "

DEMO Below ↓

CODE ↓

.code { background:#000; background-repeat:no-repeat; border: double blue; border-width: 2px 2px 2px 20px; color: #f9f9f9; 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 3 (Without Scroll & White Backgroud): For style 3 copy this code and paste above the " ]]</b:skin> "

DEMO Below ↓

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

Code4(Without Scroll & Black Backgroud): For style 4 copy this code and paste above the " ]]</b:skin> "

DEMO Below ↓

CODE ↓

.code { background:#191b1f; background-repeat:no-repeat; border: solid #191b1f; border-width: 1px 1px 1px 20px; color: #fff; 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 click on the "Save Template" button and save it.

How to use it?

To use the code box in your blog post just follow the following steps:

1. Just go to your Blogger blog post which you want to use in the code box.

2. Then select the "HTML View" Option.

3. Now, copy the code below and paste it where you want to use it.

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

Like in the Picture:

4. Replace "Your Code Here"  with your desired code.

5. Now click on the "Publish" button and see it live. 

How To Use Code Box Only for Specific Blog Post?

Some bloggers want to use Code Box only for specific posts. In this situation, If you don't want to set up a code box forever. You can use it one time. For using code box one time. Please follow these steps:

1. Go to your specific blog post.

2. And select "HTML view" options.

3. Copy a code above for using a code box. and Write or copy

<style>.code { background:#1c1b1b; background-repeat:no-repeat; border: double #1c1b1b; border-width: 1px 1px 1px 1px; color: #f9f9f9; 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; }</style><div class="code"> your code </div>

4. All is done. Just save it and see it live!

 Some of the Author's words:

This was a Guide for code box set up on blogger. The code which I include in this article is customizable. So, you can customize it as you want. If you face any kind of problem with this article. Please let us know in the comment section. I will try my best. If you think that this post will help others then share this post. Sharing is caring. Thanks.

More Posts:

3 Stylish Email Subscription Widgets For Blogger

Blogger Meta Settings and SEO