How To Add HTML Code In Blogger Post 2022

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

But we all know that we see very few options on Blogger. To add a code box to WordPress, you get many plugins so that with just one click, the code box is added to your post.

Friends, in today's post, we will tell you about two ways to add a code box so that after reading, you too will be able to add a code box to your blog post easily.

Read More: How To Create Table Of Contents In Blogger Post

So friends, without wasting time, let's find out how to add text box in blogger post.

    What is a code box?

    The code box is a particular type of box in which we type our Html, CSS, js etc. codes so that users can easily read and understand the code.

    Why use code boxes in blog posts?

    If we share information about coding on our blog, then, in this case, we should use a code box in our blog.

    Because it makes it easier for users to understand the code, they can easily find out which part of the article is given the code.

    With this, they will be able to copy that code quickly, and they will soon get what came to your blog.

    In addition, using the code box enhances the user interface of our blog and gives our blog a professional look.

    The advantage of using code boxes in blogs:

    • It gives your blog a professional look.
    • Users will find it in one place.
    • The code is easy to recognise.
    • Can copy The code once.
    • The user experience will improve.

    How To Add Html Code In Blogger Post?

    Although there are many ways to add code boxes to your blog, some of them are dangerous for our blog. If you use any such code, then your blog will get the error of Mobile Responsive Bager.

    In that case, your blog's ranking will be affected, which will reduce the traffic to your blog. But don't worry, because today we will tell you about two completely safe methods and which we also follow in our blog.

    Method 01

    This way, you can easily add code boxes. After following the steps below, you will add the code box to your post.

    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


    Read More: Best Automatic Background Remover Online Free Tools


    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


    Consultation of How To Add Html Code In Blogger Post

    So, I hope after reading today's post, you must know how to add text box in blogger post.


    You can use the above two methods if you ask me which way I operate.

    So I mostly use the first method on my blogger blog because it is effortless and intuitive. And I believe you should use the same. It will save you time.

    If you liked this post, share it with your Blogger friends. So that they also can get help from this.

    See you in another post. Keep learning new and unique wherever you are. Thank you!

    Some FAQ

    How do I embed HTML into Blogger post?

    To embed HTML into a Blogger post, follow these steps:

    1. Click on the "Insert" button in the toolbar at the top of the Blogger screen.

    2. In the "Insert HTML" dialog box, click on the "HTML" tab.

    3. In the "HTML" dialog box, copy the following HTML code and paste it into the text of your Blogger post:

    <div id="myDiv">

    This is a blog post with HTML embedded

    </div>

    4. Click on the "Publish" button to publish your post.


    How do I embed a post in Blogger?

    In Blogger, go to:

    1. Go to your blog's main page.

    2. Click on the Posts tab.

    3. You will see the Posts list on the left.

    4. In the Posts list, click on the post you want to embed.

    5. On the post's details page, click on the HTML code button.

    6. On the HTML code editor, paste the following code.

    <iframe src="http://www.blogger.com/ Embed?blogID=<YOUR BLOG ID>&height=500&width=500&iframeType=embedded&playerID=<YOUR BLOG PLAYER ID>" frameborder="0" scrolling="no"></iframe>

    7. Click on the OK button.

    Your embedded post will now appear in your blog.


    How do you add HTML code to Blogger?

    There are a few ways to add HTML code to your Blogger blog. 

    1. Click on the Blogger menu and choose “Layout”. 

    2. On the Layout screen, under the “HTML” heading, click on the “Insert HTML” button. 

    3. In the “HTML” window, copy and paste the following HTML code into the “Content” area:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR


    Post a Comment

    Previous Post Next Post

    Contact Form