Tech Blog in Nigeria for How Tos

How To Setup HTTPS (SSL) On Blogger Custom Domain for Free

Are you still using an unsecured connection (HTTP) between your readers and your blog? still searching for a way to enable HTTPS for your blogger blog with a custom domain? Want to increase your blog’s SEO ranking? or just want to know about SSL (Secure Sockets Layer ) certificate and how to obtain a free one?.
Today’s post will guide you on every step required to move from HTTP to HTTPS which is a secure (encrypted) connection between your readers and your blog.
I know you were worried when blogger limited the free HTTPS to their own subdomains (.blogspot.com) only, I am also worried until I found this solution which I rather call a free gift with an extra layer of super fast blog speed.
Yes, you heard me right! – Today’s post will not only show you how to enable free HTTPS certificate for a blogger custom domain rather it will also provide you a drastic increase in page speed. I used this method to power my own blog and in less than 12hours my blog was running fully on HTTPS.
All links automatically redirected with just a setup that took me less than 10mins and I know it will take you less because I have crafted this post just for you.
What is HTTPS? Due to online information hackers, web developers provided a solution which helps prevent these hackers from getting customers information from your blog. HTTPS is an  acronym for (HyperText Transfer Protocol Secure) is an encryption that helps protect you and your blog readers.
When SSL was introduced, it was used by E-commerce sites that collect sensitive data such as emails, password, credit card details etc from visitors but over time SSL grew into a must have for blogs.
Why do I need HTTPS For Custom Blogger Domain? – Advantages of SSL HTTPS encryption has become important to blogs for some certain reasons and also to add to it, Google has decided to add a ranking percentage to sites using SSL which means if you enable SSL on your BlogSpot blog, you would have a higher ranking edge over other blogs.
Many WordPress blogs have moved to HTTPS because it is very easy to add SSL to WordPress using plugins – this again has given them ranking power over BlogSpot bloggers with a custom domain name.
Below are a few important reasons why you need to enable HTTPS on your blogger blog.
  • Increase SEO Ranking: Google is wise and due to this sense of their’s, Google has included a ranking power to SSL which means if you want to properly SEO optimize your blogger blog, you need to setup HTTPS. Google claims to rank 30% of websites with https enabled on the first page.
  • Protect Your Visitors: You really don’t want to endanger your blog visitors. HTTPS encryption helps you protect your blog visitors from any online information hacker searching for internet users details.
  • Increase Conversions and Traffic: Sensitive internet users prefer to browse HTTPS enabled blogs. So if your custom domain is not showing the https and green padlock, they will simply abandon the site.
  • A professional Look: Having that green padlock on your blog link definitely makes your blog look professional.
  • Faster web: I don’t know about other blogs enabling HTTPS but the method I used sure increased my blog’s loading time by over 50%.

 

Disadvantages Of Enabling HTTPS on Blogger Blog? During your migration from HTTP to HTTPS you are going to encounter a few fallbacks which you can as well refer to as disadvantages.
  1. While migrating to HTTPS, your blog will experience a drop in traffic until Google crawls and index all your HTTPS-enabled URLS.
  2. After enabling HTTPS on your blog, going back to HTTP might cause your site to get totally deindexed by search engines.

 

HTTPS vs HTTP – what’s the difference? Before the introduction of HTTPS, we all used HTTP and you are still using HTTP. so what is the difference?
  • HTTPS is a secured encryption but HTTP is not (it can be easily hacked).
  • Google added an extra ranking factor to HTTPS but HTTP is treated badly (unsafe).
  • HTTPS comes with a green padlock while HTTP comes with an info icon.
  • HTTPS stands for HyperText Transfer Protocol Secure while HTTP stands for HyperText Transfer Protocol.
  • HTTP is free for all while HTTPS is not. Except you get a shared version from LetsEncrypt.

 

Are you scared? Reason why Am asking is that I know how I felt when I decided to move to HTTPS especially when you are already getting high traffic from search engines. Blogger actually made this hard for custom domain users.

Once you purchase a domain name and switch to it, you would loose your free HTTPS. I was really sad when I saw the message:

“Warning: https is not available at the moment for custom domain blogs”.

One thing in life is, not until you take a step you can never move forward neither can you fall. What do I mean? if you are scared of moving to HTTPS then you would never enjoy the benefits of it.
Asking me, I would say you move because the benefits are worth it. It is nothing to be scared about!. As long as you follow the steps, your blog will not experience any offline issues. It would continue working even when it’s still propagating.
Want to set up free HTTPS on your blogger custom domain?. – let’s get started.
CloudFlare CDN Have you heard of Cloudflare? have you used it? – if you have used it then you know the functionality it brings. I am going to show you how to move your blog to HTTPS (obtain a free SSL certificate) using CloudFlare.
but first, let me show you many more things you can do with CloudFlare and how it can help you power your website.
What is CloudFlare CDN? CDN is an acronym of Content Delivery Network is a system of servers that help deliver web pages and contents (images, HTML, CSS etc) to a user based on geographical locations of each user.
CDN is a way of delivering your content faster and safer. Instead of loading all your contents from your server, CDN acts as a middle man that help distribute your content.
Using CDN is over 50% faster than delivery contents from your own server. Why? CDNs have millions of servers distributed around the world which means your content gets to load almost instantly.
CloudFlare is a type of CDN that provides everything a CDN provides plus extra features which includes free shared HTTPS, email obfuscator, Analytics, DDoS security and much more.
CloudFlare comes with different plans but with free plan you can enable SSL on a blogger custom domain and not just that you can also enjoy free add-ons on the free plan.
Features Of CloudFlare
  1. Free HTTPS for your blog
  2. Protects your site from threats
  3. Improves your blog’s performance and speed
  4. Obfuscate your email from spammers.
  5. Adds an extra layer of caching to your blog
  6. Works great with other CDNs
READ ALSO  Best Hosting Recommended for All Bloggers

 

Now you know what CDN and CloudFlare is, let us get started with adding HTTPS to blogger custom domain which should take only a few minutes.

If you are afraid of coding!, don’t worry, You won’t make use of any codes. P.S you can Hire Me to do everything for you while you sleep.

How To Migrate Blogger Custom Domain From HTTP to Free Secure HTTPS Now it’s time to get the job done real quick and start enjoying a massive boost in SERP plus a secured website from online hackers. In case you find any issues at any point, feel free to comment.
Video Tutorial below
Create A CloudFlare Account To create a free CloudFlare account simply visit www.cloudflare.com >> locate “Get Started Today” >> Add your Email and choose a password >> Hit Sign Up.
On the next page, Tick ” I agree to …” and >> Click Create Account.
Add Your Blogger Blog To CloudFlare Get started with CloudFlare. You have just taken your first steps to HTTPS. On this next page, locate “Add a website“, in the box below it, input your blog custom domain URL. (e.g www.mastergblog.com.ng). >> Scan DNS Records.
Blogger Https
It will take CloudFlare a few seconds to scan your blog. What this simply does, is provide custom nameserver for your blog’s integration. After counting, click “Continue“. Verify DNS Scan records. After the scan, CloudFlare will provide the list of all your DNS records just as shown in the below photo. Do verify to see if all your records are complete. Click “Continue
Select a CloudFlare Plan A free plan is just enough for us to enable HTTPS on blogger but if you feel you need more than a normal blog plan then go for the other plans.
In this article am using the “Free Website“. – select it. You would see it’s feature. >> Locate “Continue” and let’s go!.
Change Your Nameservers This time you would have to visit your domain registrar dashboard to change Nameservers. What this simply does is allow CloudFlare to take control of traffic and performance of your blog.
I use garanntor and I have explained its steps below. All domain registrars are nearly the same but you can also browse how to change nameserver for your specific registrar.
NameServers using Garanntor Open a new tab and Login to your registrar dashboard >> go to client area >> Domains >> beside you domain name, Click the drop-down icon (next to spanner icon) >> locate manage nameservers >> Nameservers >> you would see your default name servers (even CloudFlare showed you) >> switch to custom nameservers >> replace the name servers accordingly >> Change Nameservers.

It will then take at most 12 – 24 hours to propagate.

Does that stop us from working? No. We will continue with the setup and before 12hours, everything will start working automatically.

Go back to CloudFlare and click “Continue“.
You have just setup CloudFlare on your custom domain name. Your account will not be active yet. Because the Nameservers are still propagating.
Enable Free HTTPS (SSL Certificate) For Your Blogger Custom Domain Name. Let’s get started with enabling the free https on your blog. This is the solution to what BlogSpot refused to give us. Using CloudFlare free shared SSL we are going to enable HTTPS on your blogger blog.
It should start working in less than 12hours and your blog should not experience any downtime and if it does, it will be for only a few minutes that is if the nameserver takes longer than expected to propagate.
In the “Crypto” tab, locate SSL and at the right, you should see “Full” >> Click it and select “Flexible” from the options.
Congratulations! That is all the work in setting up HTTPS for blogger blog. Next up is to properly forward blog pages using 301 redirects.
301 Redirect Blog Domain, SubDomains, and Blog URLS to HTTPS. Using page rules, we will redirect all blog pages from HTTP to the HTTPS version of your blog. This will have an effect on all pages both home page, post page, static page and subdomains, that is if you use subdomains (e.g blog.mastergblog.com.ng).
Note: The option for “Always HTTPS” maybe not be available until your nameservers have finish propagation. In case you face this problem, just wait till your nameservers finish propagating before setting page rules.
Info: in the rules below, replace mastergblog.com.ng with your domain name.
Go to “Page Rules” on the top tab >> “Create Page Rule“.
In all rules, replace “mastergblog.com.ng with your blog URL.#
Rule 1
if the URL matches: http://*mastergblog.com.ng/*
Locate and Click Settings, Set it to “Always Use HTTPS“.
Rule 2
if the URL matches: http://mastergblog.com.ng/*
then the settings are: Forwarding URL >> 301 – Permanent Redirect.
Bottom URL: https://www.mastergblog.com.ng/$1
Rule 3
if the URL matches: https://mastergblog.com.ng/*
then the settings are: Forwarding URL >> 301 – Permanent Redirect.
Bottom URL: https://www.mastergblog.com.ng/$1
Those are the page rules which you need to set. Each of these page rules will help redirect both the www and the non-www version of your HTTPS-enabled blog.
Changing Security Options CloudFlare acts as a protection guild for your site and it helps you prevent bad browsers and bad bots from accessing your website. But then you don’t want it preventing everybody from entering your website, so you need to change your security options to low.
Go to “Firewall” >> “Security Level” >> Change it from Medium to “Low“.
Congratulations… Your blogger blog has fully moved to HTTPS but then you need to give it a few hours to see the changes.
Please do wait till your blog fully migrate to HTTPS before you do the next steps. Though you can continue with it, it is advised to be a bit patient. While doing mine, I simply went to bed and continued the next day.
Fixing Mixed Content Errors After Moving to HTTPS If after moving to HTTPS, your blogger blog starts working, you might experience a little problem which is called mixed content error.
How do I know? If your blog load showing HTTPS and then shows an info sign after loading then your blog is faced with a mixed content error.
What is Mixed Content? This is when some of your files such as JS, Images are requesting to load using HTTP instead of the newly installed HTTPS. This is a big problem for bloggers using the old templates.
This is why BlogSpot provided the new themes so as to overcome mixed content errors. But still, if you love your theme so much and don’t want to go for the new themes then I can help you out.
It’s going to be a little work, especially when you are afraid of your template HTML. So first thing first is to back up your template.
  1. Replace all HTTP with HTTPS Go to themes >> Edit HTML >> Using CTRL + F search for HTTP. You would find a lot of URLS. Now all you simply need to do is replace all these HTTP with HTTPS. – All of them both images and external links.
  2. Using Default Blogger Search Box? If you are using default blogger search box, then you will also have a problem with the mixed content error.

 

Go to themes >> Edit HTML >> Search for the below code.

<form expr:action=”data:blog.searchUrl”>

Replace with

<form expr:action=’data:blog.searchUrl.https’>

That should fix any problem with mixed content. But then these files might just be in blog widgets added in the layout section so be sure to visit layout and inspect each widget for HTTP URLs.
Next up visit your blog and press CTRL + Shift + J to find verify if there is any mixed content error.
What next? – We need to work on our SEO settings.
How To SEO Optimize Blogger Blog With (HTTPS) SSL Certificate. While setting up SEO on your blog, it will not have a one day impact instead it will take time. Google and Bing will have to crawl your blog HTTPS version.
Replace all “blogname” with your domain name and “BLOGTITLE” with the title of your blog.
Step 1
Go to themes >> Edit HTML >> Search for the below code. It’s in the head section of your blog.

<b:include data=’blog’ name=’all-head-content’/>

If you can’t find this code, paste the below code right after <head> but if you found the code, replace it with the below code.

<link href=’https://www.blogname.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/> <meta content=’blogger’ name=’generator’/><link href=’https://www.blogname.com/feeds/posts/default’ rel=’alternate’ title=’BLOGTITLE – Atom’ type=’application/atom+xml’/> <link href=’https://www.blogname.com/feeds/posts/default?alt=rss’ rel=’alternate’ title=’BLOGTITLE – RSS’ type=’application/rss+xml’/> <link href=’https://www.blogger.com/feeds/BLOGID/posts/default’ rel=’service.post’ title=’BLOGTITLE – Atom’ type=’application/atom+xml’/> <!–[if IE]><script type=”text/javascript” src=”https://www.blogger.com/static/v1/jsbin/2591933621-ieretrofit.js”></script> <![endif]–> <meta expr:content=’data:blog.url’ name=’og:url:domain’/> <!–[if IE]> <script> (function() { var html5 = (“abbr,article,aside,audio,canvas,datalist,details,” + “figure,footer,header,hgroup,mark,menu,meter,nav,output,” + “progress,section,time,video”).split(‘,’); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand(‘BackgroundImageCache’, false, true); } catch(e) {} })(); </script> <![endif]–>

How to find blog ID? If you don’t know your blog ID, simply look up at the URL bar while in your dashboard and you would see it (e.g blogID=5090122629090583639).
Save your template.
You might also want to manually redirect pages to make sure all pages are redirected. While doing mine, the Page rules were just enough for me but you can add the below code to add an extra layer of redirection.
Optional – Javascript redirects. To do this, search for </head> and paste the below code just above it. Don’t forget to replace blogname with your blog name.

<script>$(document).ready(function(){ $(“a”).each(function(){ var i = $(this).attr(“href”); var n = i.replace(http://www.yourdomain.com, “https://www.yourdomain.com”); $(this).attr(“href”, function() { return n }) }) }); </script>

Update Your Robot.txt Next up is to update your former HTTP robot.txt file to an HTTPS enabled robot.txt.
To get this done, Go to Settings >> Search Preferences >> Custom robots.txt. >> Edit.
Replace the default one with the below one.

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.blogname.com/sitemap.xml

Save your settings.
Submit HTTPS version to Webmasters Visit Google Webmasters and add your HTTPS versions as new properties. That is https://www.blogname.com and https://blogname.com >> After that you should now have 4 different properties for your domain i.e
  • http://www.blogname.com
  • http://blogname.com
  • https://www.blogname.com
  • https://blogname.com

 

Change your preferred domain name to https://www.blogname.com and submit a new sitemap to it.
How To Enable Blogger SSL On Free BlogSpot Domain I have seen some BlogSpot bloggers using a subdomain and still don’t have HTTPS enabled. I will assume you didn’t know what to do! – the little guide below will show you how to enable HTTPS for your free BlogSpot domain name.
Go to settings >> basic >> HTTPS redirect >> Change it to YES.
if you have issues with mixed content, please follow the procedures above. Don’t forget to also update your Robot.txt and submit new URL to webmasters.
Final Words I believe you have been successful in adding HTTPS to your BlogSpot blog. In case you faced any problems, I am here to help and will get it done for you at a cheap price.
Thanks to Prince John

Blogger SSL is important for your blog you should migrate your blog today from HTTP to a free shared HTTPS certificate offered free by CloudFlare.

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: