How to Share HTML Codes in Your Blog Post

We only feature products that we hope you will love. We may earn a commission if you purchase through our links at no extra cost to you.
 
 

Posted on December 2, 2016 | Last updated on February 19, 2023

For more of my styled desk photos visit my Etsy store.

There are 2 Ways to Insert Codes into your Blog Post…

Sometimes we want to share codes with our readers, and there are a few ways to do it. You can create a simple notepad with the HTML code included, and the reader can download it. The other way, which I think is nicer and easier for the reader, is to include an HTML code box in your blog post, and the reader can highlight it to copy and paste.

I’m using Blogger, and I searched online for a few ways to include an HTML code box. I found various boxes from other bloggers, but I didn’t like any of them.

I finally found two HTML boxes that have been functional, and I think they look nice and simple. Just what I was looking for.

1st Way – The Simple HTML Box

I call this the simple HTML Box because it is simple.

To use the simple HTML box simply copy, and paste the code below. When you are writing your blog post make sure to click on the ‘HTML’ option that is beside the ‘Compose’ on the top left. When you are in the HTML mode you can paste the following code. Close the code by adding this to the end: </textarea> You can also change the numbers to adjust the width and height to your liking.

COPY & PASTE THE FOLLOWING CODE <textarea cols=”40″ name=”textarea” rows=”4″ style=”height: 192px; width: 730px;” wrap=”VIRTUAL”> CODE HERE

You can see how I used the simple HTML box to share how I make bilingual blog posts.

2nd Way – The More Sophisticated HTML Box

The more sophisticated HTML box, as the name states, is more sophisticated. I came across GitHub not so long ago. GitHub lets you share HTML codes inside your blog post if you have Blogger or WordPress.

Step 1
Go to GitHub.com and create an account. You will be asked to confirm your email, and once you’re in, go to the main page. On the top right, click on ‘New gist’.

Step 2
After you click on ‘New gist’, add a title to your new gist. Insert your HTML code in the blank box, and click ‘Create public gist’.

Step 3
Your code is ready to share, so now just copy the code given to you beside Embed. It’s a one-line code that you need to paste into your blog post. That’s it!

You can see how I used GitHub to share how I center everything on blogger for various things like titles, sidebar, date, and more.

These are the two ways that I know how to share HTML with your readers if you have Blogger. How do you share HTML codes? I would love to know! For more blogging tips, and tutorials check out my Content page. Thanks for passing by, and until next time!

More HTML Blogger useful codes: