December 2, 2016

How to Share HTML Codes in Your Blog Post

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

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

Sometimes we want to share codes with our readers, and there’s 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. 

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 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
You’re 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 in 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 title, sidebar, date, and more.

These are the two ways that I know how to share HTML to 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:

Facebook | Instagram | Pinterest | Twitter | YouTube

You Might Also Like


  • Reply A Pint-Sized Life December 13, 2016 at 1:24 am

    So useful! I'm on Squarespace, but this would've been super useful when I was on Blogger!

    Alix | http://www.apintsizedlife.com

  • Reply Rosalyn Osorto December 13, 2016 at 9:05 pm

    Thanks for passing by! You never know when it might come useful :))

  • Reply WorkingMomMagic December 15, 2016 at 10:02 pm

    I wish I would have known this when I was on Blogger!! Great tip!

  • Reply Rosalyn Osorto December 18, 2016 at 12:57 am

    Thank you for passing by :))

  • Leave a Reply