How to make money from blogger blog in 2024

 Introduction

Hello Blogger, in this tutorial I will share with you all how to add a code box in blogger. If you provide any kind of code or text then you must add a code box. Because it gives a clean and professional look to your post and is also user-friendly.

If you want to add box code to your Blogger post then just follow the below steps.

How to Add Code Box in Blogger?

Log in to your blogger dashboard and select which blog you want to add a code box.

 Next is Go To "Theme", then click on the drop-down icon near the "Customize" option and click on  "Edit HTML".

search  ]]</b:skin> code in blogger template code 

For search code: click anywhere inside the HTML code area and press the "Ctrl + F" key

 copy below CSS code and just paste just above  ]]</b:skin> code

Note: I give you 4 styles of code boxes. choose your favourite one and copy its CSS code

Style 1 (With Scroll & Simple Design): For the below style copy this code and paste it above the ]]</b:skin> 

DEMO Below ↓

CODE ↓

.code { background:#1c1b1b; background-repeat:no-repeat; border: double #1c1b1b; border-width: 1px 1px 1px 1px; color: #f9f9f9; 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; }

Style 2 (With Scroll & Highlight Design): For the below style copy this code and paste it above the  ]]</b:skin> 

DEMO ↓

CODE ↓

.code { background:#000; background-repeat:no-repeat; border: double blue; border-width: 2px 2px 2px 20px; color: #f9f9f9; 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; }

Style 3 (Without Scroll & White Backgroud): for the below style copy this code and paste it above the  ]]</b:skin> 

DEMO Below ↓

CODE ↓

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

Style 4(Without Scroll & Black Backgroud): For the below style copy this code and paste it above the  ]]</b:skin> 

DEMO Below ↓

CODE ↓

.code { background:#191b1f; background-repeat:no-repeat; border: solid #191b1f; border-width: 1px 1px 1px 20px; color: #fff; 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; }

Now click on the "Save Template" button and save it.

Now your 80% work is done ✅

<!-- Make it Highlight--> The code which I include in this article is customizable. So, you can customize it as you want.

 How to use it in your post?

To use the code box in your blog post just follow the below steps -

1. First of all Open your Blogger blog post which you want to use in the code box.

2. Click on the pencil icon and switch compose view to "HTML View".

3. Now, copy the below code and paste it where you want to use the code box.

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

Now Replace "Your Code Here" it with your desired code.

Then again switch compose view and you can see it.

That's it.

Conclusion

I hope this tutorial will help you to understand how to add a code box in blogger. what you think about this article and if you face any kind of problem-Related this article. Please let us know in the comment section.

Edit This Article