Hello friends welcome to the CostFree.xyz, today I will show you how to insert or add a Code box or Copy Area in a Blogger
Why did we need to add a Code Box to the blog post?
A code box may be a special area where the language code appears and we can easily copy the code, once we are running a blog where we provide language code like Java, C++, Python, etc.. then we are using the code box choice to provide the code for the users and without a code box, it’s difficult to copy the code.
When we are describing the computer language and code then we put the code in the content, so it’s very difficult to copy the code because we know we can copy the code along with the content and when we apply the code box in the code then any user can easily copy the code, here we will also use this to highlight some content in our blog post.
In this post, I offer you 2 types of Code box styles the first one is you need to apply CSS code in your blog theme and use it in your post and the second one is you can use it directly in your post, now let’s start.
These are the subsequent Steps
Step 1: First Code box style, attend the blogger blog dashboard and click the Theme option, now click the customize dropdown button and choose the Edit HTML option.
Step 2: Now we click anywhere within the code and press the Ctrl+F button and find out the ]]></b:skin>
code then make some space above the code and paste the Code box CSS code, eventually, click the Save button.
Code Box CSS Code [With Scroll]
.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 Box CSS Code [Without Scroll]
.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 3: Here attend the Posts option and select your post where you want to add a Code box but first, you’ve got to paste your code in the compose view option then click the first Pencil menu option and select the HTML view option.
Add Code Box On Blogger blogpost
Step 4: Now discover the first and last code line here and make some space then paste the starting and ending II code (applying code) and at last click the publish button.
Code Box Applying Code
<div class="code">Your Content or Code Here</div>Step 5: Second Code box style, during this option, you do not worry about the CSS code and finding starting and ending points of your code, now attend the post where you want to add the special area for copy code or code box then click the first pencil icon and select HTML view.
Now find the paragraph end where you would like to add your code but first, add your code or content to the given Code box code then paste the entire code to the paragraph end, and eventually click the publish button.
Above I offer you my blog as a demo, where I enable the Code box option if you’re thinking to set up a Code box option in your blog then first look at the option and how it looks like my blog.