How to add HTML code box in blogger posts

How to add HTML code box in 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 am also started 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 HTML/CSS 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?

Enter your E-mail address to get more updated interesting posts:

Your best regards - winsomeismail.com

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, what actually looks.

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, 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


Subscribe to this blog tutorial for more updates regarding Adsense, Blogging, SEO, Technological tricks and tips, and even more. If you are interested in any one of them please subscribe HERE.

Post a Comment

0 Comments