Blogging

How To Add Html Code Box In Blogger Post || Easy Guide [2023]

If friends, you want to know about how to add HTML code box inside blog post in your blogger website, then you have to read this article completely, then you will know how easy it is to put HTML code box in people.

What Is Html Code Box?

HTML code box is in the box in which we can paste any HTML code or JavaScript or CSS inside the HTML code box and make our blogger sleep without any live preview.

When you paste any of this code inside the HTML code box, it will not be your live preview, so this is the advantage and it is very easy to put in blogger.

Benifits Of Add Html Code box in blog post

  • The first benefit is that you can show any wording inside the highlight box.
  • Another benefit is that you can show the HTML code inside a code box with no preview.
  • The third advantage is that whatever is written inside the HTML code box can be copied by one click.
  • The fourth advantage is that this will make your user friendly.

Steps Follow For Add Html Code Box In Blogger Post

Step 1:- Go to the blogger dashboard.
Step 2:- Go to the your blog post.
Step 3:- Click on the left side pencil icon and go to html view.
Step 4:- Below The Html code box Copy.
Html Code Box Copy2
<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 100%;">

{----Paste your code here----}

</textarea>

<button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>
<script>
function copyhtml() {

const text = document.querySelector("#htmlText");

const btnText = document.querySelector("#htmlBtn");

text.select();

document.execCommand("copy");

btnText.textContent = "Copied";

setTimeout(function(){

btnText.textContent = "Copy";

}, 5000);

}
</script>
<br /><br /></div>
Steps 5:- Paste your code in this html code box who written “Paste Your Code”
Steps 6:- After follow all steps go to the your blog post and paste who where you want to add html code box.
Steps 7:- Save it Now.
If you have completed all these steps, then now your blogger has HTML code box installed on your blog post, then after applying the code,

you can check whether your blog post has HTML code box or not.

Conclusion

Friends, if you have liked the information given by us in this article, then you must tell us by commenting, as I told you, it is very easy to put html code box in blogger,

so if you want this information to your friends. If you want to share then you must share it

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button