How We Can Add Code Box in Blogger Post - Insert Code Box In Blogspot

Full Easy Guide to Add Code Box in Blogger

If you write related posts of blogging and you are on the website blogger (blogspot platform), then you will need a lot of code box, but there is no plugin on Blogger, if you paste the code directly in your blog, then visitors have trouble in copying the code and understanding it, so you use the Code Box in the blog so that visitors do not have trouble in copying the code and understanding it. Fallen. Let us now know how to add a code box to a blog post.


We can put 2 types of Code Box in Blogger's post (1). Simple Code Box and (2). Style Code Box

Let us now know about 2 types of code boxes, whatever code box you like, put that code box in your blog.

Add Code Box in Blogger Post
High DA Social Bookmarking Sites List


#1. First Method Simple Code Box


It is very easy to install Simple Code Box, you do not have to copy the code given below and paste this code in the html of your blog post.


First of all copy the code given below

<form><textarea rows="5" cols="40" onClick=select() readonly>Replace Your Code Here!</textarea></form>

Go to the blog post in which you want to add the code box and click on HTML

Now paste this code where you want to put the code box in your post.

Paste your code instead of "Replace Your Code Here!"


#2. Second Method Style Code Box

In Style Code Box, you can explain your code by coloring some words to make it easier for your visitors, like I have colored “Your Code Text Paste” to explain you in the above code, let us now know that the style How to set up a code box


Step 1 :

First of all you have to copy the code given below

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

Now you have to go to the Dashboard of your blog and click on Theme.

After clicking on the theme, you have to click on edit html

Now click anywhere


After clicking, you have to press CTRL + F Keyboard Button, which will open the search box and in the search box ]]></b:skin> search that place.

Now you have to ]]></b:skin> Paste the copied code on top of this code, just like the photo shown above

Now you have to save the theme by clicking on save theme


Step 2 :

You have to copy the code given below

<p class="code">Replace Your Code Here!</p>

Now you have to go to your blog post.

Now add this code where you want to add the code box

Paste your code instead of "Replace Your Code Here!"


Now the Code Box will have been added to your blog.