How To Add Code Box In Blogger Post - Onetechspot
Select Page

Add Code Box In Blogger

Have you ever thought about how to add code snippets in Blogger?

But I don’t know how to do that.

Today I’ll show you how to add a code box to a blogger post. Blogger is the perfect platform for beginners who want to start a blog without using a dime. It beautifies your blog and gives you all the options  to make your blog look like a professional blog.

There are many professional blogs hosted on Blogger, including mybloggertricks, helplogger, and more. Each blogger starts his blog journey from another blog and then moves on to another blog. You have the option to edit the blogger’s blog template to your liking. Only a basic knowledge of HTML and CSS is required.

If you’re writing about Blogger on your blog, you may have approved the code you want to include in your template. It’s a good idea to share these codes in a separate code box to make them look stylish. It’s also convenient for visitors to simply copy the code  from the code box.

To add a code field to your Blogger

  1. Log in to your Blogger Blog Dashboard.
  2. Then go to Themes> Edit HTML.
  3. Click anywhere in the code area and press Ctrl + F  to open the search box.
  4. Type or paste thecode in the search box and press Enter.
  5. Insert the CSS code specified below in the code box just above

Code 1. For style 1,

.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

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

  1. Now click on ” Save Template ” and you are done.

To use this in this usage post, follow these steps:

  1. To use this, just click the HTML tab in the Blogger Post Editor.
  2. Next, write or paste the following code into the blogger’s post editor.
  3. Replace “code here” with the code you want.
  4. Then click the Publish button to see it live.