How to add html code box in blogger post?

How to add html code box in blogger post?

New bloggers who have just started to write blogs really needs help in many stages. Which may be in adding some kind of widgets or designing blog. This is the great issue being faced by new bloggers. And in many online platforms and blogs, there is not a valid source to learn blogging.

In this blog we will learn to add an html box in a blog post. Because if you are planning to share some kind of html posts to your readers, then you will be looking for it. And yes you are at right place to get the html box code. This html code box can be customized fully. You can change its colours sizes etc.

So, Lets take start to add html or CSS code box in blogger post:

This kind of html code box will be shown in blogger

Step 1

Sign In to Blogger first.

Step 2

After Signing In to Blogger click on Theme. As shown in the picture below

Step 3

After clicking on Themes. Click on Customize Button in the Theme page.

Step 4

After clicking on Customize, A new page will be opened Click on the Advanced, then Add CSS as shown in the picture below.

Step 5

Now you are in the CSS box of your website. Copy the code in the box below, and paste it in the CSS box as I have entered it in my CSS box in the picture above.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #073763; 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; }

Now you have entered the code in the CSS box. It is added in your theme now, you can use it any time you want in your website.

Step 6

Now you are all done, just copy the following code in the box below. And add it in the HTML editor of your blogger post. After adding it return back to Compose section. And replace the line Edit Your HTML Box from the post.

<div class="code">
Edit Your HTML Box
</div>

Now you are successful in adding a HTML Box in your post. Don't forget to share this post if it really helps you and also give us your feedback in the comments below.