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 up 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. 

Copy the Required code  From Here 👇

<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: &quot;Courier New&quot;, 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.

Method-2: Add code box using the default theme settings

You can insert a code box using the default shortcodes that come with themes like Galaxymag, Newspeed, etc from Templateify and you don’t need any codes to implement this. 

Just follow the steps correctly as shown below.👇

Step-1: Paste the code directly in the Compose view of the Blog Post Editor

Step-2: Now add the shortcode “code-box” just after the code and make it bold.

Step-3: Now select the code along with the shortcode click on strikethrough from the code editor and save it.

Note: You can find the strikethrough Button just after the Underline Button. 

But it won’t work in the multi-line code properly and it also does not support scroll in the code box.

So you can use this for single-line codes and multi-line codes. you should prefer method 1.

Conclusion

There are several other ways to add a code box in the blogger blog post but these two methods are easy to use and work perfectly.

If you like this tutorial then share it on social media and ask your doubts if this code is properly working on your theme or not. You can also join our Telegram Group for a faster solution.

If you need any theme installation/Other Blogging services then you can contact us at our Social media handles.

• How to activate Lazy loading in Blogger
• Install Anti Adblock script in Blogger