How to Add HTML Code Box on Blogger Post?

Blogger blog is a very good platform for all those who want to share their thoughts and earn money from it. Blogger blog is free and it gives you the option to edit the blogger template according to your choice.

You can edit the blogger blog template  by clicking on Edit HTML option and add html or CSS code to it or you can add CSS code by clicking on Customize.

When you write a post in which you give information about some useful HTML and CSS programs, then you must definitely want that HTML and CSS code looks stylish and professional in your post. So friends, I am going to tell you about how to show HTML and CSS code box in your blogger post.

WordPress has special plugins for this. There are also many tools from which you can create code for the code box. But there may be a problem in this that there is a link to their site along with the  code It would not be right to put this kind of code on your site. You don’t need to be afraid The code I am giving you will not have any kind of link attached to it.

How to Add Code Box in Blog Post?

  • First, you have a login to your blogger account.
  • Go to your Blogger dashboard.
  • Click on Theme at the right column of the dashboard.
  • Now click on three vertical dots icon
  • On the Theme page, click on Edit HTML.

  • Click anywhere on the HTML code area.
  • Press the Ctrl + F on your keyboard keys to open the search box.
  • Copy the code given below code and paste it on the search box or write a given below code.
]]></b:skin>
  • After adding code on Search Box you have to press Enter.
  • Now copy the given below code and paste this code above ” ]]</b:skin> “.
csscode {
margin : 10px 25px 10px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #F2F7FF;
border-top : 3px solid #000000;
border-right : 3px solid #000000;
border-bottom : 3px solid #000000;
border-left : 3px solid #000000;
}
  • You can also change Border Pixels, Border Color, Color Inside the Box.
  • For this, go to google and search for Html color code then select your color and replace it with your current color.
  • Press on Save Theme. You are done code box has been added to your blogger.

Add CSS Code Advanced Option

  • Sign in to Blogger site.
  • Select the blog to update.
  • From the left menu, click Theme.
  • Click Customize button(orange button) from “My theme”.
  • From left menu, open Advanced option.
  • Click down arrow in “Advanced” panel.
  • Scroll down options and select “Add CSS“.
csscode {
margin : 10px 25px 10px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #F2F7FF;
border-top : 3px solid #000000;
border-right : 3px solid #000000;
border-bottom : 3px solid #000000;
border-left : 3px solid #000000;
}
  • Now, Add your custom CSS in given input.
  • Click “Save icon” button from bottom right corner.

HTML Code Box on Blogger Post

  •  just go to the Post section click on New Post.
  • Type whatever you want and in order to add code box click on the HTML button in the blogger editing section.
  • Paste the given below code where you want to add code box.
<div class="csscode"> Paste Your Code Here </div>
  • Here you can see I have added a code box in my blogger post.

Note : Remember if the first letter of your code includes the right angle bracket that is  < ‘ then code box will not render in your blogger post you have to raw HTML to the escaped HTML. You can convert this with the help of tools on google.

I hope you enjoy reading some of the articles. You must have learned that How to add HTML Code Box In Blogger Post.  Follow me on social media And share this article with your friends. 

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start infotechbot.com for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment