Advertisements
how to add html code container in blogger

How to add HTML code box in blogger posts

by

How to add HTML code box to blogger posts 

Are you trying to share your HTML or any other programming code on your website, And are you looking for a code container box for your Blogger post? No worries, because in this blog post, you’re getting to know the simple HTML/CSS code container box professionally. 

Well, I am a blogger. Like you, I have also struggled to find the best code container box. Many of the bloggers wrote an article that you need to edit the whole blogger template HTML and CSS. The simple I shared here without much long process you can simple done here.

If these works are done please comment down…

Steps to do with CSS or HTML code container:

  • Login to your blogger HTML
  • Click on NEW POST
  •  View as “HTML view”
  • Paste the below code
  • Preview and Publish

Read also: How to add meta tag description in blogger to rank our website?

Copy the below code from <style………….</pre> and replace your HTML/CSS code in red content(PASTE YOUR CODE HERE!)

<style type=”text/css”>
pre.CICodeFormatter{
font-family:arial;
font-size:12px;
border:1px dashed #CCCCCC;
width:99%;
height:auto;
overflow:auto;
background:#f0f0f0;
line-height:20px;
background-image:URL(https://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);
padding:0px;
color:#000000;
text-align:left;
}
pre.CICodeFormatter code{
color:#008000;
word-wrap:normal;
}
</style>
</p><pre class=”CICodeFormatter”><code class=”CICodeFormatter”>

PASTE YOUR CODE HERE!

</code></pre>

Code Preview below:

Instead of PASTE YOUR CODE HERE! I wrote a simple HTML code of mine to be shown a preview of code content, and what actually looks like.

1:   <!DOCTYPE html>  
2:   <html>  
3:   <head>  
4:   <title>Winssome Ismail</title>  
5:   </head>  
6:   <body>  
7:   These is about Blogging, SEO, Technical tips...  
8:   Author & Founder - Shaik Ismail.  
9:   </body>  
10:  </html>

Code customizable:

Here the colored code can be changeable as per your wish “color:#008000″ is for the code text color. This code“text-align:left” is for code line alignment(Left, Right, Centre). background:#f0f0f0 is to change the background color. Even more like a font family for designed text, and font size for big and small letters. If you are well at HTML and CSS you will do it better.

I tried also to include the “Copy to clipboard” button, but I didn’t. If the above code doesn’t work for you. Please let me know and write a comment below where the error is.

Keywords:

How to add HTML code box

Html code box

Create an HTML code box

Add HTML code box in blogger website

Code box code for bloggers

blogger html codes

Conclusion

In conclusion, this blog post offers a straightforward solution for bloggers seeking a professional-looking code container box to share programming code on their websites. Unlike the complex processes suggested by others, this guide simplifies the procedure. As a fellow blogger, I’ve encountered the struggle to find an ideal code box. By following the provided steps—logging into Blogger’s HTML, creating a new post, and pasting the given code—the task becomes hassle-free. Customization options like color, alignment, and background add a personal touch. While a “Copy to clipboard” button was attempted, the core guide remains effective. For assistance or issues, readers are encouraged to comment. Keywords: HTML code box, Blogger, code sharing.

Leave a Comment