This article is going to give you a simple HTML code for code box to add in your blog post.
A code box is a box or a block that holds your HTML code. Instead of adding a code direct to your post. You can put it into this box which can help readers copy it easily and reduce space of your article.
Adding a code without a box in your blog post can make your post looks too long. This because some of HTML codes are very long and can cover big space when added to a post.
Using a code box to hold your HTML codes you would like to share to your readers could be a good option. Since this box saves a space that could be covered by a long code. But also makes it clear for the readers to understand where the code is and copy it easily.
HTML for a Code Box
This box can be used to any kind of website or blog, whether is WordPress, Blogger or any other.
What you have to do? Just copy the code from the box below, go to your post and switch to HTML view. Paste this code to a place you want a box to appear. Switch back to compose view and replace "Replace the text with codes" with your text or code you want to add.
<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>
You can also read:
- 5 HTML Tables For Blogger (Add table to a post without coding knowledge)
- How To Add A Scrolling Text Box On Blogger
- How To Add A Moving Text On Blogger
Comments
Post a Comment