How To Add Code Box In Blogger Post

Ever thought how to add code snippet in blogger?

But don't know how to do it.

So, today I will tell you how to add code box in blogger post. Blogger is the best platform for newbies who want to start their blog without spending a cent. It gives you all options to make your blog beautiful and to make your blog look like a professional blog.

There are many professional blogs hosted on blogger like mybloggertricks, helplogger etc. And every blogger starts their Blogging journey from and then move to any other blog. It gives you an option to edit your blogger blog Template according to your choice. Just you need some basic knowledge of HTML and CSS.


When you write about the blogger on your blog you may have shared code to paste in Template. It's good to share that codes in a separate code box in a way that it looks stylish. And it's helpful for visitors because they can copy the code easily from code box.

How To Add Code Box In Blogger

1. Login to your blogger blog Dashboard.

2. Then go to " Theme " > " Edit HTML ".

3. Click anywhere inside the code area and press Ctrl + F keys to open the search box.

4. Write or paste " ]]</b:skin>  "code in search box and press Enter.

5. Just above " ]]</b:skin> " paste the code box CSS code given below:

Code 1. For Style 1 Copy This Code [With Scroll]

.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. For Style 2 Copy This Code [Without Scroll]

.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 click on " Save Template " and you are done.

How To Use This

To use this in your post just follow the following steps:

1. To use this just click on HTML tab in your blogger post editor.

2. Now write or paste the code given below in your blogger post editor as shown in the image below:

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

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

4. Now click on " Publish Button " and see it live.

From The Editors Desk

So, this was a guide about adding code box in blogger blog. If you have any problem related to this article, comment below and do not forget to share this article.