How to add code box in blogger post
Want to Add a code Box in a Blogger post with the scroll option?
If yes, then read the complete guide where I will share with you different methods to Add a code box inside the Blogger post.
But, why do you need a code box in a blogger post?
In some tutorials, we want to share some code with readers to copy and implement the steps. But If we simply paste the code in the blog post then it becomes hard for readers to copy the code properly.
Sometimes the codes look ugly and take a lot of space in the blog post section. So we need a code box with scroll functionality to solve the issue. You can use a text file link instead of showing the codes in plain text but it is not always feasible as we share multiple codes with very short lengths.
So Follow the below steps to Insert the code box on the blogger website.
There are several ways to add a Code box in a blogger but I will share with you the easiest way by adding a small code in the blog post without changing the HTML codes of the theme or by default methods of Some popular themes of Templateify.
Method 1: Add code box using HTML code
In this method, you need to add an HTML code in the blog post section and replace the text with the code you want to embed in the blog post.
Step-1: Copy the below code and paste it into the HTML section in the Blog post editor of Blogger.
<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: "Courier New", Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>
Step-2: Now Switch the editor to compose view and replace the text with the code and save the draft as shown in the below screenshot.
Step-3: Now start writing the next paragraph by replacing the below text and your code box is successfully embedded in the blog post.
In this method, you need to paste the above code in the HTML section and replace the text with the code. There is no need to change the code in the theme editor section.
This is easy to use, So just save the code into a text file and use it in the future blog post.
You can also change the background color, border, and padding of the code box by changing the values in the above code. So keep experimenting with HTML. 👍
⇒If you like this method then share it with your friends and Join our Weekly newsletter for more interesting Blogging Tips.