Alright, enough of the drama. As promised, here's the tutorial about fixing mixed content errors on Blogger/Blogspot blogs using HTTPS. When I recently updated my blog's template, the "Secure" badge that usually appears on the address bar was replaced by "Not secure". Below is how it looks on Google Chrome:
This blog's URL also looked like this on Mozilla Firefox:
The reason for this is that the new template came with some assets (images, scripts) that are uploaded somewhere non-secure or that is not on SSL/HTTPS. To fix it, we'll change the "behavior" of the URLs within the blog's HTML code. Instead of leaving some of the URLs in http, we will make changes to those URLs so that they also load in https, just like the blog itself. To begin, you'll need:
- and more patience 😂
Just kidding! On a serious note (you'll still need patience, of course), please follow the steps below:
- Log in to your Blogger account.
- Click the "Template" tab, and select "Edit HTML".
- Once in the editor, click in the HTML editor field and hit CTRL + F on your keyboard.
- Input http: into the search box and hit "Enter/Return".
- Remove all http: from the links and keep // with the rest of the URLs. See how it's done by watching the video below:(Switch to fullscreen and HD for a clearer view)
Note: Only remove http: form actual URLs that you'll find. The template has other sets of code which you should not touch. Here's a sample:
- Once you have edited all the URLs in the template HTML editor, make sure to save it. It may take time before the changes take effect (also consider the cached copy of your site in your browser so besure to clear the cache before checking again).
I hope you find this post helpful!