Add Coding Box In Blogger Post

Hello Everyone,

If you're a developer or coder, I think you know the importance of codes. Now, if we're managing blogs then implementing codes in blogger post is a difficult task. So in this blog post, I will tell you how to Add Coding Box In Blogger Post. 

How's the coding box will look like

Here's the codes

<pre style="background: rgb(250, 201, 38); 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: #212428; border-top-style: solid; border-width: 15px 0px 0px; color: #212428; 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;">Paste your codes</span></pre>

Let's understand code

Some necessary changes can be made,

background: rgb(250, 201, 38);

• Change the color of coding box background.

border-top-color: #212428;

• Change the color of border of coding box.

border-width: 105px 0px 0px;

• Also, adjust the top border property.

How To Add Coding Box In Blogger Post

• Simply copy the codes
• Paste inside the HTML View of your blog post
• Now paste the codes at the place of Paste your codes in Compose View
• All done, enjoy it

⦾ You can also paste code in Post template (optional) from settings of blogger dashboard for not pasting code manually in every blog post.

Thanking you,