Bloglovin’ is my all time favorite feed for reading blogs on, so having a button for my readers to follow me from was essential. Anyone with an account can grab their own button from the widgets page, which is super convenient, but there’s one issue – it only comes in two colors, baby blue and a pastel pink. As you can see, neither of those colors fit with my blog theme, and I didn’t really want my Bloglovin’ button stealing the show on my front page. I’ve seen a few bloggers with custom-colored buttons and couldn’t figure out what kind of magic they were using, until I finally found the secret.
That’s it. That’s all you need. Well kind of. See how all that’s in there is an opening and closing “div” tag? Those tags will do the magic, but you have to give it some extra code first. Create a text/HTML widget and paste in the above code. Now head over to that Bloglovin’ widgets page I linked to earlier, and choose either the pink or blue button (use the blue if you want to use my references in the next few steps). Copy the code they give you – mine looks like this:
Now paste that code between the “div” tags in the first code I showed you. If you chose the blue button and save your widget now, it should appear the same as mine. This is where the tedious part comes in.
See how there are five numbers, all set to “315”? To get the color you want, you’ll have to change all of those numbers to something else, but make sure when you change a number, you change all five of them to the same number. Otherwise your color won’t change. To test out how much the color will change based on how much you change the number, try changing the “315” to “300”. You’ll notice the color became a brighter green, so it’s going backwards on the color wheel. Now change the “300” to “330”. Now the color has a blue tint to it, so it’s going forward on the color wheel. Play around with that number until you get close to what you want, and know you won’t get the exact color.
Cool, right?
If you have any questions or trouble, let me know in the comments!
Have you discovered any cool blog tricks? Share your secrets!
ps – you should definitely follow me on Bloglovin’ if you haven’t yet. Shameless self promotion.
Could you please link to the original source of the code?
I don’t know who originally wrote this exact code, but I found it on Elise Dopson’s blog! http://www.elisedopson.com/2015/03/change-colour-of-bloglovin-button.html
Veryyy helpful! <3
Very neat trick, but I’m not sure if you’re aware but Bloglovin’ recently changed all their blog buttons and your cool colour changing trick no longer works.
Will you be updating this post soon, with a new code? I would really like to add the new bloglovin’ email widget to my site but the black button looks a bit too harsh on my page. Any help would be great.
-Janeese
I tried installing it on my own blog and received an error, so once the bugs get fixed I’ll try to figure something out!