How To Add HTML Code In Blogger Post Step By Step

In this post, you will learn how to add Html code in blogger post. If your blog is related to coding, then many times, you need to add HTML, CSS, JavaScript etc., code to your post...

how to add html code in blogger post

How To Add Html Code In Blogger Post?

Method 01

Step-01:  you need to log in to your Blogger.com account.

Step-02: Open Any Articles and switch "html view".

how to add html code in blogger post

Now, Copy the Below Html Codes and paste the codes where you want to show the Html code. 

<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: &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;"> Past Your Html Code Here</pre>

Step-03: Then switch "Compose View" and  Past Your Html Code Here! 

how to add text box in blogger post

Step- 04: Now your Blog website is Completely Ready For Html box. And click the update or publish icon.

how to add html code in blogger post

Method 02

Now we will tell you how to add the syntax highlighter code box, which is the most stylish code box.

Step-01:  Go to Blogger.com and log in to your account.

how to add code box in blogger post

Step-02: Now, you click on the Theme section of your Blogger.com Dashboard.

Step-03: Click on the "Edit HTML" option. 

how to add html code in blogger post

Step-04: You can double click on any space with the mouse cursor. 

Step-05: Now, You find "]></b:skin>" and paste code Just Above This Code.

how to add code box in blogger post

 .post-body pre {
  background-color: #EEEEEE; /* Change Background Colour */
  border-left: 5px solid #DDDDDD; /*Left Border Colour */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #000; 
  font-size: 14px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Step-06: Now, click the save icon.

how to add html code in blogger post

Step-07: Open Any Articles and switch "html view".Now, Copy the Below Html Codes and paste the codes where you want to show the Html code.

how to add text box in blogger post

 <pre><code>
Past Your Html Code Here
</code></pre>

Step-08: Then switch "Compose View" and  Past Your Html Code Here!

how to add html code in blogger post

Step- 09: Now your Blog website is Completely Ready For Html box. And click the update or publish icon.

how to add html code in blogger post
Next Post Previous Post
No Comment
Add Comment
comment url