close
Blogspot

How to enable HTTPS on Blogspot blog and Fix Mixed Content Errors

“HTTPS Everywhere”, you may have heard this phrase a few times on the internet. This campaign was launched by Google to make the internet a safer place.

turn on https blogspot

Securing your website is a web standard. It gives the user a safe and private environment to browse the website. If you have created a Blogspot blog and thinking about how to enable https on your blogger blog.

You have come to the right place. But before we begin this guide, lets first understand some of the basics.

What is HTTPS?

HTTPS is the secured HTTP protocol. In other words also known as the hypertext transfer protocol secure. This protocol is used to transmit data securely over the world wide web. 443 is the default port used by https for transmitting data

When you visit the website you may have seen a green padlock or even just a simple grey padlock on the browser address bar. This padlock signifies the website is running or HTTPS or is secured using an SSL certificate. Most of the website these days run on HTTPS.

example of seo friendly url structure

When you browse any website that supports https, the connection between the server and the user is completely secure and private.

For example- If you are registering yourself as a user on a website and the site is not secured. In this case, the data is transferred as plain and simple text.

Hackers can use tools to sniff the information and can tamper with the data.

But if the website is using an SSL certificate, all the data transmitted is encrypted and secured.

According to Google

Over 78% of Chrome traffic on both Chrome OS and Mac is protected Click To Tweet

What is an SSL certificate?

SSL certificate (secured socket layer) are files that are installed on the web servers to ensure a secured connection between the website and the user.

These certificates activate the green padlock in the address bar of the browser.

Did you know

28% of people when visiting a website look for security signals. Click To Tweet

And one of those is the green padlock in the address bar.

A few years back, Google released an official announcement stating “the security of the users is the top priority and HTTPS will be a ranking signal”.

This was followed up by another announcement saying, starting Jan 2017 if your website is processing critical data such as credit card information or passwords and does not support HTTPS will be marked as not secure and the long term plan is to mark all websites as not secure that doesn’t support HTTPS.

And later stating, starting July 2018, with the release of Chrome 68, Chrome will mark all websites not supporting HTTPS as not secure.

If you visit any website that is not using an SSL certificate, it will have “Not secure” in place of a padlock on the browser address bar.

not secure on chrome

This means Google wants webmasters to secure their websites and make the internet a secure place for users.

Upsides of securing your Blogger blog with HTTPS

  1. A safe and private connection between the user and the website.
  2. Builds trust with the visitors which is invaluable.
  3. It makes the blog look more legit and professional.
  4. HTTPS is a ranking signal, you will get a slight boost in rankings.
81 of the top 100 sites on the web use HTTPS by default Click To Tweet How to enable HTTPS on Blogspot blog and Fix Mixed Content Errors

With that said, let’s start the tutorial

Step by Step guide to enable HTTPS on your Blogspot Blog with Custom Domain

enable https on blogspot blog

Blogger has a very easy to understand and operate dashboard with a few clicks, you can turn on HTTPS for your blogger blog.

Keep in mind if you are currently using a Blogger subdomain, the HTTPS is automatically turned on for your blog and the only thing you need to do is enable the HTTPS redirect.

We highly recommend using a custom domain name with your Blogspot blog as it is a very small investment with high returns.

The reason behind turning on the redirect is simple, before enabling the HTTPS redirect users can access both HTTP and HTTPS versions of your website. And when you redirect the HTTP to HTTPS, the users will always visit the secure version of your site.

To enable HTTPS redirect, navigate to settings >> basic and under HTTPS you will find the settings to turn on the redirect. Select yes and the page will automatically refresh and the settings will be saved.

https redirect blogspot

Enabling HTTPS on Blogger blog having a Custom domain

Before we move further, don’t forget to take a backup of the blog. In case anything goes wrong you can always revert back to the previous working version of the blog.

Step 1– Go to blogger.com and login to your account

login blogger

Step 2– Once you enter the dashboard, on the left sidebar navigate to settings >> basic

settings blogger dashboard

Step 3– In the basic settings search for the HTTPS section and the first thing you need to do is turn on the HTTPS availability.

https availablity

Step 4– Now, below HTTPS availability is the option to turn on the HTTPS Redirect. You will find a toggle button select yes. Enabling this will make sure all the visitors will be served over an encrypted connection which is the HTTPS.

https redirect blogger custom domain

The page will auto-refresh and the settings will be saved. Now every visitor will land on the secure version of your website.

After completing these steps there are chances that you may face mixed content issues. The root cause of mixed content is when you have a secured website and some of the resources of the website load over non-secure or HTTP connection.

These errors will downgrade the security of your blog.

Mixed content issues can be caused by

  1. Theme
  2. Post and Page source
  3. Third-party gadgets

How to fix the mixed content issue on Blogspot blog

After you have enabled HTTPS on your Blogger blog, the next step in the process is finding if the site is facing any mixed content issues.

The first step in the process is identifying if the problem is on

  1. Single page or post
  2. Sitewide problem
  3. Certain small functions are not working properly

Visit each and every page of your blog or website using the HTTPS version and perform the following steps

  • When you find the page or post with the mixed content error, inspect the page by right-clicking on the page  >> inspect >> console or if you are comfortable with keyboard shortcuts, press Ctrl + shift + J. It will take you to the Javascript console.

enter javascript console browser

  • You will notice the common source of the problem are URLs starting with HTTP instead of HTTPS. For example, a non-secure script may look something similar to http://example.com/js/abc.js and an image causing mixed content issue will have a source similar to https://example.com/image.jpg

checking mixed content errors

You can see in the image above an image source is causing the mixed content problem and the source URL has HTTP as the protocol.

  • Make a list of all such posts and pages facing the errors with the problem source. Identify if this is a site-wide problem due to the theme you are using, a non-Google widget or it is just a problem on a single page or post.

Fixing theme-based mixed content on Blogger

If this is a theme related problem or site-wide issue, navigate to the Theme option on the left sidebar of your Blogger dashboard. It will take you to a page where you can edit the code of your theme.

editing theme blogger

Click edit HTML to edit the code of your theme, press Ctrl + F and search for HTTP. Now carefully replace the HTTP with HTTPS and save the settings.

Remember in case you make any errors, you will not be able to save the changes trying to make.

search and replace http with https

It is important to manually verify the results before moving forward. There are chances that both HTTP and HTTPS URLs may not return the same result. This means a link that is working on HTTP may not work on HTTPS. In this scenario, you may have to look for an alternate source.

Fix mixed content problem related to third-party Gadgets in Blogspot

In case you notice a malfunctioning gadget or a problem arising due to a third party gadget you have used, head over to the Layout and find the HTML and Javascript type gadget. Click edit and again replace the HTTP links with HTTPS and save the changes.

editing gadget in layout to fix mix content

Fixing mixed content error on a single page or post in Blogger

To remove the errors from individual pages, select and page or post and hit the edit button. When you click edit, you will enter the blogger editor and now you have to select the HTML tab and once more search and replace all the HTTP links with HTTPS.

editing single page and post to fix mixed content

Once you are done making the changes, click preview to see if you are satisfied with the changes and then update the post or page to save the changes.

Using these steps you can fix the mixed content errors on your blog. But don’t forget to check and recheck to make sure all the resources on your blog are working as they should be.

How to avoid mixed content errors in the Blogger editor

Once you turn on HTTPS for the Blogger blog and create a new page or a post. If accidentally you have linked to a resource that loads on HTTP while saving the content it will return you an error similar to the screenshot below.

blogger post editor mixed content error

In the above image, while I was trying to save the page with a resource loading over the non-secure connection, the Blogspot editor detected an error.

It is also displaying the URL that is creating the mixed content error. Now you can either go the HTML version of your page and correct the URL or you can simply click Fix and the error will be automatically resolved by the editor.

fixing the errors detected by blogspot

I have highlighted the original source and the link updated by the editor itself. Using this process you can resolve the errors with a single click.

Also, there is a second way to resolve such errors. You can simply go to HTML and search for HTTP and replace it with HTTPS. And once the changes are made don’t forget to preview the changes before saving to make sure everything is working as expected.

If you select dismiss and save the page, refreshing the page will show the error again.

For more information related to enabling HTTPS on your Blogspot blog, you can check this guide by Google

With that said, I hope you find this article useful and it helps you enable HTTPS and remove the mixed content errors. The next step in the process is optimizing your blog for SEO and working on the Blogger Search Preference Settings. We have compiled an article on SEO tips for Blogger platform.

And also, don’t forget to comment and share this article with your friends on Social media. To stay up to date and receive regular updates in your inbox subscribe to our newsletter and follow us on social media platforms.

GeekyPlug
Tags : SecurityTutorial
Jasmeet Singh

The author Jasmeet Singh

Jasmeet Singh is the Blogging El Jefe at GeekyPlug. Started his career as a BPO employee and now is a full-time blogger and writes how-to guides and his personal experiences related to blogging. In his spare time, he likes to read books, listen to podcasts and play video games.

2 Comments

  1. Thank you for a very informative post – the screenshots were excellent to help set this up. I use https on my blog and appreciate the security it offers my guests.

Leave a Response