Blogger is a CMS platform allowing users to create a simple blog easily. This tutorial shows how to add an Instagram feed to the Blogger website. It is straightforward and requires just a few steps.

Step-by-step instructions on how to add Instagram Widget to Blogger

This article does not show how to create your blog on the Blogger platform. We assume that you already have a running blog. Suppose you plan to start your journey with blogging and need instructions on how to use Blogger. In that case, we recommend reading this tutorial – How to create a blog on Blogger.

Step 1 – log in to your Blogger account.

Screenshot showing blogger logging form.

Firstly, please log in to your Google account to access your Blogger platform. If you don’t have a Blogger website, please start creating one and then return to this tutorial.

Step 2 – Go to the Layout section.

Screenshot showing selected Layout menu item on Blogger platform.

If the menu on the left side of the screen is hidden, click the Main menu hamburger icon to expand the menu. Click on the Layout link to edit the layout of your website.

Step 3 – Add the HTML/JavaScript gadget.

Screenshot showing HTML/JavaScript gadget on the Blogger website.

Click Add a Gadget button in one of the Sidebars where you want to place the widget. You can always change the feed location after using drag and drop.

The overlay with the list of gadgets should appear. Click on the HTML/JavaScript gadget. It allows you to add custom code to your website.

Step 4 – paste your Instagram widget embed code.

Screenshot showing the HTML/JavaScript gadget configuration.

An overlay with the HTML/JavaScript configuration will appear. Fill the Title form with whatever text you want:) It will appear above your widget. Paste your widget embed code into the Content field and click the Save button.

Step 5 (optional) – move the gadget to a different location.

Screenshot showing newly added gadget with custom HTML code.

You can either leave the gadget with the Instagram widget where you’ve added it originally or move it to a different place. Move the cursor over the newly added gadget if you want to change the location. The cursor will change its appearance to move. Hold down the left button of your mouse and drag it to a different location, like the “Page body” or “Footer”.

If you’ve moved the gadget, click the Save button on the toolbar at the bottom of the screen.

Step 6 – view your blog with the Instagram widget!

Screenshot showing LightWidget installed on Blogger website.

Lastly, click the View blog button in the left menu on the Blogger website. It will take you to your website, where you can see the beautiful Instagram widget on your blog!

Comments (0)

You must be logged in to post comments.