How to add HTML code box in blogger posts
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?
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5QaoPiM3dk5vNPz2egEaYwRc4qtzFyJB0wftVqv9VxRCE5qkdNddyRJ0VfTuv0pXn0hk-nZBTY9CRDKTPBCM2F2yD_juYEGdJmqRduTRGkk0UZBBEsPIiC8v68SZ3VfNlBEqOKjW729t/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">
</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.
0 Comments
If you have any doubts, please let me know. Please Do Not SPAM!