How to Fix HTTPS Mixed Content Errors in Blogger Blogspot Blogs?

After Google Confirms HTTPS as a factor for ranking a site. We know the importance of HTTPS (SSL Certificate) to encrypt blog connections. Blogger users were very excited after Google blogger officially rolled out this feature for blogspot.com Blogs. 

The website's server uses a certificate to prove the website's identity to browsers. Always used certificate from trusted organizations.

What are mixed Content Errors that appear on browsers?

When a blog/website is enabled for https. When a user opened that blog/site then the webpage will download initial HTML content securely over HTTPS then load the follow up content  (such as  images, videos, stylesheets, scripts) over insecure HTTP one by one from top to bottom if in that follow up content any script or image which starts with http will consider as mixed content. This trigger Browser error to display and degrade the HTTPS security and effects badly user experience of your blog/website.

Mixed content can be caused by HTML markup External Stylesheets or JavaScript content in:

• Blogger Blog Templates Source
• Post and page source
• Third Party Gadgets source

How to Check your Blog for Mixed Content Errors?

For the best result use latest version of your browser . Use (Google Chrome the fastest and most user friendly browser)

On your browser, visit your blog using HTTPS Protocol for example :  https://yourblogname.blogspot.com.

Wait for the blog to get fully loaded after that press F12 on your keyboard to open developer tools then click on console to see the errors and warnings .

Or 

Go to Tools >> Developer >> Console 

Or 

Use this shortcut CTRL + SHIFT + J to open the JavaScript console

Look for mixed content errors:

If you are using Google Chrome You will see this type of alerts and warnings at the top left side in the address bar 

The site isn't using a private connection. Someone might be able to see or change the information you send or get through this site. 
You might see a "Login not secure" or "Payment not secure" message. We suggest that you don't enter sensitive details, like passwords or credit cards.
On some sites, you can visit a more secure version of the page:
Select the address bar.Delete http://, and enter https:// instead.If that doesn't work, contact the site owner to ask that they secure the site and your data with HTTPS.

Source :  Google

“Mixed Content: The page at 'https://yourblogname.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://yourblogname.blogspot.com' was loaded over HTTPS, but requested an insecure image 'https://yourblogname.blogspot.com/image.jpg'. This content should also be served over HTTPS.”

Make a list of unsecured urls and open and check the static pages too.

In Blogger The Most Common mixed content errors found in template and gadgets.

Fixing Mixed Content Errors in Template:

If you see the console and found same error in multiple pages or posts this means the error caused by insecure Scripts, Stylesheets or images.

Go to Blogger >> Template >> Edit HTML >>

Press CTRL + F And Search for :

http://

Find all http:// links replace it with https:// do it for all instances.

After Adding https to all the scripts, image links, external stylesheets now its time to save the template.

Advised To Blogger Users Switching To HTTPS:

Before Enabling HTTPS make sure all the Images, source links, Scripts, External Stylesheets start with https:// 

When you are adding third party widgets from the layout section check whether there is an image, Scripts like Font-awesome, Jquery etc starts with https://

If the Mixed Content error appears on static pages like Contact, About etc or in an individual post then open and edit that page/post in the editor and switch to html and then type ctrl + F then a search box will appear search for http:// then change all the http to https .