How to Add JavaScript or HTML to Your Blog

If you were creating a website from scratch and wanted to add an HTML or JavaScript function, you would just paste the code for that function into the existing HTML of your site. That isn’t quite the way things work if you’re using Google’s Blogger service. Pasting the code for the HTML or JavaScript function directly would only result in an error on your site. Instead, you have to follow a few specific steps if you want your site to load for visitors the way you intended it to.

Step 1

Log into your main Blogger account the same way you would if you were starting a new blog or creating a new post for an existing blog. Click the button labeled “Your Blogs” on the left side of the screen to view a list of all blogs that are currently active on your account. Click once on the name of the blog that you want to add an HTML or JavaScript element to.

Step 2

Click the button labeled “Layout” on the left side of the screen. This will show you a basic layout of your blog’s current design. You won’t actually see the content that is present on your site. Instead, you will see a series of boxes that indicate where specific types of content are currently located. For example, if you have a bar running across the page with a list of all the various pages you have created for your blog there will be a banner labeled “Pages” at the top of the screen.

Step 3

Choose a location for your HTML or JavaScript element. Make this decision based on the current design of your site. Be sure to consider how that specific element will look when placed against the existing content on your site.

Step 4

Click the “Add a Gadget” button in the area of your site where you want your HTML or JavaScript element to go. This will open a new window allowing you to select a specific type of function to add to your chosen location.

Step 5

Select the gadget labeled “HTML/JavaScript.” As its name suggest, this particular gadget is designed to be used when incorporating any third party HTML or JavaScript function into the code of your site. Paste the code for your function into the box on screen and click the “Save” button. This will return you to the previous “Layout” screen. You can change the position of your HTML or JavaScript function by clicking on the box that represents it in the layout and dragging it to the physical location where you want it to go. When you are happy with your changes, click the button labeled “Save Arrangement.” The JavaScript or HTML functionality will immediately go live on your blog.

Photo credit: Riebart via Foter.com / CC BY

Leave a Reply

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