How to add Code box on Blogger posts & pages

 How to add Code box on Blogger posts & pages 

Hey, have you ever wanted to Make a code box On Blogger But you don't know how? Well if that's the case then you have come to the right place Today I will be covering that topic of how to add a Code box on Blogger posts and pages.

Today I will show you how to add a Code box on Blogger ,now to be able to do this you will need your Mobile phone, Laptop -or- computer 

You can do this On your Mobile it could be a tablet or just a normal smart phone, but its better to use a PC because its hard to edit HTML template if you are on mobile but anyway let's start.

How to add  code box

Step 1. Sign in to your Blogger dashboard, Then choose your blog 

Step 2.  Go to Theme/Template, click the edit HTML Button .

Step 3. Search for " ]]</b:skin> " tag (Click Ctrl +f to get the search box |if your on mobile Then Click here to get a keyboard apk that has Ctrl )

Step 4. Right above  " ]]</b:skin> " tag  paste the CCS code given below 

 Code 1 this code has scrolling on     

                   

.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. This code does not have scrolling 

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

Step 5. Just click save and your done 

How To Use IT

Step 1.Go to your post or page and click on HTML view  then go to the space where you want it to be and paste the Code below 

<div class="code">
                        Your Code Here
                        </div>

        

Step 2.Replace " Your Code Here " with your own code or text .

4. Now publish your post or page  and see the outcome 

I hope this helped you So much if it did help you then Please leave a comment Now and if it didn't work then Comment Dow below and I will try to help you in anyway possible. 

That's it I hope it helped you