Mixed Content Errors in BlogSpot Blogger

In the past, we have shown you how to enable HTTPS SSL certificate in Blogger that makes it possible for you to have encrypted connections to your blogs. Since, blogger officially rolled out this feature for blogspot.com domains many people have enabled HTTPS for their blogs. However, they are facing multiple functionalities issues and the most common problem they are facing is of mixed content errors occasionally from their template, gadgets, or blog post content. Today, in this article, we will show you How to Fix mixed content errors in BlogSpot Blogger

What are Mixed Content Errors?

Mixed content errors occur when a web page is initially secured by SSL but it contains both secure HTTPS and non secure HTTP content (such as images, links, videos, scripts, style sheets). This browser error will cause degradation in your site performance, security issues and would affect the user experience of your blog.

In Blogger mixed content issues can be caused by the HTML content in:

1. Template Source code
2. Post and Page source code
3. Layout gadget source code

How to Check your Blog for Mixed Content Errors?

1. Open your browse (we recommend Google Chrome), visit your blog using HTTPS protocol i.e. https://<yoursite>.blogspot.com.


2. Once your blog is loaded completely, go to Tools >> Developer >> Console or use this shortcut CTRL + SHIFT + J to open the JavaScript console.


3. Now in the console look for mixed content errors similar to the one we have below.
   
   

   “Mixed Content: The page at 'https://<your-blog>.blogspot.com/' was loaded over HTTPS, but requested an insecure script 'http://<some-url>/script.js'. This request has been blocked; the content must be served over HTTPS.”

   
   

   “Mixed Content: The page at 'https://<your-blog>.blogspot.com/' was loaded over HTTPS, but requested an insecure image 'http://<some-url>/image.jpg'. This content should also be served over HTTPS.”

   
   

   “Mixed Content: The page at 'https://<your-blog>.blogspot.com/' was loaded over HTTPS, but requested an insecure URL 'http://<some-url>/webpage.html'. This content should also be served over HTTPS.”



4. Now make a list of unsecured URLs that you have encountered. You can visit many other pages on your Blog to get more mixed content errors. 

Fix Mixed Content Errors on your Blogger Template:

It means that mixed content errors is appearing on multiple pages and is most probably caused by either your template or gadgets, follow below instructions to remove them.

1. Go to Blogger >> Template >> Edit HTML >> and search for http:// 


2. If you are able to find any http:// link replace it with https://


3. Before saving, verify if each like is available over HTTPS by opening that linking into a new window or tab of your browser. If both HTTP and HTTPS links are giving you the same results, then you are good to click Save Template.


4. Now go to Blogger >> Layout >> Edit each HTML/Javascript type gadget and replace all https:// links with http://. Verify if the https:// links are working correctly and then press Save.

Fix Mixed Content Errors on your Posts & Pages:

This means that mixed content errors are in the source code of one of your posts or pages that you need to edit from the blogger post editor.

1. Go to Blogger Dashboard >> select any of your post or page and press Edit link.


2. Now revert to the HTML Tab, look for http:// and change it to with https://


3. Verify each HTTPS link by opening it in a new browser window to see if the content matches non HTTPS link. After the verification, click Update to save the post or page.

Update to Blogger Post Editor to Fix Mixed Content:

Blogger has announced on 19th April 2016, that they have an update to the Blogger post editor to help with mixed content. Which means you can fix mixed content in just one click on your posts and pages. 

1. Edit a post, revert to HTML Tab and press Update.  


2. If the editor detects any errors they will be shown above the editor, along with the option to fix the errors found.


3. After fixing the errors, again press the Update button. 

We hope this tutorial has helped all blogspot.com users in removing all mixed content error from your different posts and pages in blogger. This method can be applied to custom domains as well, if your domain has an SSL certificate. Let us know if you have a better way of fixing these errors in the comment below. You can also share our content on Facebook,Twitter or Google+.