how to add code box in blogger post

Add code container box in blogger. Want to Add a code Box in a Blogger put up with the scroll option?

If yes, then study the whole manual in which I will proportion with you special techniques to Add a code container in the Blogger put up.

But, why do you want a code container in a blogger put up?

how to add code box in blogger post.

In a few tutorials, we need to proportion a few code with readers to duplicate and enforce the steps. But If we in reality paste the code withinside the weblog put up then it will become tough for readers to duplicate the code properly.

Table of Contents

1. how to add code box in blogger post.
2. 📡 So Follow the under steps to Insert the code container at the blogger website.
3. Add code container the usage of HTML code

Sometimes the codes appearance unpleasant and absorb a number of area withinside the weblog put up phase. So we want a code container with scroll capability to remedy the issue. 

You can use a textual content report hyperlink in preference to displaying the codes in simple textual content however it isn't always constantly viable as we proportion more than one codes with very brief lengths.

📡 So Follow the under steps to Insert the code container at the blogger website.

There are numerous approaches to feature a Code container in a blogger however I will proportion with you the perfect manner through including a small code withinside the weblog put up with out converting the HTML codes of the subject or through default techniques of Some famous topics of Templateify.

Add code container the usage of HTML code

In this approach, you want to feature an HTML code withinside the weblog put up phase and update the textual content with the code you need to embed withinside the weblog put up.

Step-1: Copy the under code and paste it into the HTML phase withinside the Blog put up editor of Blogger.

Also read :how to add code box in blogger post

upload code container in blogger put up through the usage of HTML code

Copy the Required code From Here

Step-2: Now Switch the editor to compose view and update the textual content with the code and store the draft as proven withinside the under screenshot.

Step-2 of Adding Code container in Blogger Blog put up.

Step-3: Now begin writing the subsequent paragraph through changing the under textual content and your code container is efficiently embedded withinside the weblog put up.

In this approach, you want to stick the above code withinside the HTML phase and update the textual content with the code. There isn't anyt any want to extrade the code withinside the subject editor phase.

Also read :How to add code box with copy to clipboard button in Blogger?

This is simple to use, So simply store the code right into a textual content report and use it withinside the destiny weblog put up.

You also can extrade the history color, border, and padding of the code container through converting the values withinside the above code. So hold experimenting with HTML. Now copy your code box code 👇

Code Box style 1

copy your code

<div style="border: 1px solid rgb(204, 204, 204); padding: 10px;"> "One of the most frequently asked questions by bloggers is how to add a code box in Blog post. A Blogger HTML code box is where we can enter code snippets or any text to share with your visitors". </div> <br /> <br/>

If you want this approach then proportion it together along with your pals and Join our Weekly e-newsletter for greater exciting Blogging Tips.

Also read :how to add code box in blogger post

[ Code Box style 2 ]

<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #48d4db; border: #dddddd 2px solid">Add your text you want in the text-box here</p>

Demo

[ Code Box style 3 ]

<p style="padding: 2px 6px 4px 6px; color: #555555; background-color: #e6f6ff; border: #c960e0 6px; border-left-style: solid;">How to add a code box in your Blogger website.

Demo

[ Code Box style 4 ]

<p><div style="border: 1px solid black; height: 150px; overflow: scroll; width: 300px;"> <p>Here's a demonstration of how to make a scroll box. This scroll box contains scroll bars (or at least scroll tracks) even when the content is smaller than the scroll box.</p> </div> <p></p>

Also read :how to add code box in blogger post

Demo

Thank you please visit again.