How To Add HTML Code Box on Blogger Post

Many Bloggers want to make a beautiful blog with different styles that make users and SEO friendly blog posts. Unfortunately, Blogger has not any option to add a plugin, but it allows us to add any pieces of stuff ( plugins ) through HTML and CSS code. So, if you are not from a technical background, it may be a little bit hard for you. But you do not have to worry about it, because I am here to help you.

Why do you need to add a code box on your blog post?

"Neat and Clean is the habit of keeping clean. It is a great virtue and a part of our belief." Make sure that your blog is neat and clean. 

If you write blog posts related to tech or Blogging tips, maybe most of the time, you have to need to share code with your users in a simple way. 

Code boxes represent both text and code individually. It provides better user experience and also makes your code easy to copy. 

Simple step by step guide on How to add an HTML code box on blogger/Blogspot site.

1: Log in to your Blogger blog dashboard.

2: Go to "Theme" > Click on 3 dot bar > Click on edit HTML.

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

4: Write " ]]</b:skin> " on the search box and press Enter.

5: Just above the " ]]</b:skin> " Copy and Paste the CSS code from the code box that given below.

.code { background:#0a060f; background-repeat:no-repeat; border: solid #5C7B90; border-width: 5px 5px 5px 10px; 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; }

6: Now click on " Save Template ” and, now you are ready to use the code box.

How do I use a code box on the Blogger post?

To use this in your post just follow the instructions given below.

First method: 

1: Write your completed post with both your text and code in Compose mode. After completing your writing, follow the 2nd step.

Method to use HTML code box on blogger blog post

2: Turn Compose mode to HTML mode, find the first word from the code that you have written on Compose mode. 

Example: your code is <div class='input-area'> here first word from your code is "<div class", and last is "area".

3: Paste or write, <div class="code"> this code  just before the first word from your code.

4: Paste or write </div> just the end of your code.

2nd method 

This method little bit easy, but sometimes you have to need to make your code showable before adding on the post.

1: Write your post > Turn Compose mode to HTML.

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

2: Now write or paste the above code from the code box, where you want to show your code.

3: Replace " Enter your code here", with your desired code.

4: Preview the post to see how your code will show in front of users. And publish it.

Thanks for reading this post. If you think this guide is helpful for you then you could share with your friends.