How To Add A Bloglovin Widget To Your WordPress.com Sidebar

…ok, that’s a bit of a wordy title, isn’t it? You’re here because you’ve got a blog hosted on WordPress.com and you want to know how to put a Bloglovin widget into your sidebar, but when you go to bloglovin.com/widgets and try to insert the code onto your blog, you see this message:

That yellow highlighted bit is so frustrating, right? We’re going to show you a workaround to get a Bloglovin badge on your site and encourage people to subscribe to your blog!

First, while you’re still on the widgets page at Bloglovin’, scroll down to the bottom to the Logo and Icons section. We’re going to use the Icons file, but you can choose whatever you like – you could even create your own custom image here. Unzip the file that downloads, and choose which file you want from the PNG folder – we’re going to go with the circle B logo and we’re going to use the larger file (as indicated by the file name) to make sure it looks good on all screens.

Next, we need to upload this to our WordPress.com site. In the dashboard, head to the media section, and click upload media. Find the file and upload it, and once it uploads, click the edit button that appears above it (next to the add new button).

You’ll see the following section pop up – you’ll want to copy the image URL later.

Open up a new tab to get the link to your blogs Bloglovin page. The easiest way to do that is to go to Bloglovin.com, click your profile picture in the top right and choose the “Profile” option. Underneath your name and location will be any blogs that you have claimed – click the one that you want to get the link to (if you have more than one)

Now you have both pieces of information needed, open up a third tab and go to the customise section in your dashboard. Click the Widgets option, and choose the grouping that relates to your sidebar. Choose “Add A Widget” then choose the “Custom HTML” option. You don’t need to fill in at title here

You’ll need a little bit of HTML code now to put everything together. We’re going to assume you don’t know any HTML at all – if you’re interested in learning more, check out our HTML series. Here’s the HTML you’ll need – we’ll explain it better in a minute

<a href="LINK TO YOUR BLOGLOVIN PAGE"><img src="LINK TO YOUR IMAGE"></a>

The first part of this HTML, where it says<a href=”LINK TO YOUR BLOGLOVIN PAGE“> is how you link to something. You always want to close this HTML with </a>, otherwise the rest of your page just becomes one big link! You will want to replace the text that says “LINK TO YOUR BLOGLOVIN PAGE” with the link to your Bloglovin page.

The middle section of the HTML that says <img src=”LINK TO YOUR IMAGE“> is how you insert an image into your text. You will want to replace the text that says “LINK TO YOUR IMAGE” with the link that you copied earlier after uploading your image. If you want to center the image, then you’ll want to surround the link and image with the following

<p style="text-align: center;"><a href="LINK TO YOUR BLOGLOVIN PAGE"><img src="LINK TO YOUR IMAGE"></a></p>

The <p> function is telling browsers to display this specific item in the center of the sidebar or wherever it is. If you want to test whether the HTML is correct, then this HTML Editor site is really useful and will make any corrections if needed when you click the Clean button.

Once you’re happy you’ve put the HTML together in the right way, click Done in your widget and go to your site to test it out!