How to add Code Box in Blogger Post

Hello friends! Today in this article we are going to talk about adding a Code Box in Blogger Post 2020. And How to add a Code Box in Blogger Post in 2020. We will know all these things in detail in this article. So stay with this article to know in more detail.



Blogger is one of the best for Beginners who want to start blogging. In Blogger you can create an amazing Website with free hosting and domain. You can found a number of themes on the internet and you can choose the best theme to create a professional-looking Website. Every new Blogger starts his journey from Blogger and learns Blogging. 

$ads={2}

In Blogger you can edit your website according to your own choice, but for changes in the template, you need knowledge about HTML, CSS, and JS. Similarly, the add code which I provide you is made to use HTML and CSS. You just follow some steps to use this code in your website. But many other platforms like WordPress you can use plugins to create this code box on your website.


Why you add a code box in your post

Sometimes when you write a Blog Post, you need to share a code with your visitors. For a better-looking post, you should use this code box. This code box easily shows the difference between code and article for your visitors. It also gives a professional-looking post to you. 

You know that Blogger does not give us any type of plugin for code boxes in our blog post.



So, I will tell you to step by step with a simple way to add a code box in a Blogger post. I will give a simple and attractive-looking code box which is very helpful for your users to copy this code.

$ads={2}

Steps to Add Code Box in Blogger:

  • Firstly Login with your Blogger.com account
  • Go to your Blogger Dashboard
  • Click on Theme Section 
  • Now click on the customize arrow then click on Edit HTML
  • Now you will see an HTML code, click anywhere in the code area.
  • Now Press Ctrl + F, you will see a search bar above of code area.
  • Copy the below code and paste it into the search box

]]></b:skin>

  • After Add above code press Enter
  • Now copy the below code and paste above to ]]></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;
}

 

  • I will shade some place, you can change Border Pixels, Border Color on your awn choice.
  • After changing in code, Click on Save Theme Icon.
  • You have successfully added the code box in Blogger.

How to use this code box in Blogger Post:

$ads={2}

The next thing that comes in your mind is how you can add this code box in your Blog Post.
It's so simple, just click on New Post.
Now start to write his article.
Now you have to put your code in the article, so click on the Pencil icon on the left side of the screen.
Click on HTML View
Now Paste the below code Where you want to add the code.

<div class="csscode"> Paste Code Here </div>

  • After paste, the above code, again click on the pencil icon and Now click on Compose View
  • Replace Paste Code Here with your code, which you want to enter in the code box.
  • Now publish your post.
  • You have successfully created a code box in your post.

Conclusion:

Did you like this How to add a Code Box in Blogger Post? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Post a Comment

Please do not enter any spam link in the comment box.