Sunday, August 14, 2016

How To Get HTTPS In Custom Domain In Blogger? - SE Optimized
How To Get HTTPS In Custom Domain In Blogger? - SE Optimized

Yes, it's been a long time since I published my last post, but here, I've got something unique for you!
The thing I am today going to share worth your valuable minutes. Also, let me tell you that I have got some pieces of fresh content to write in the upcoming days. So, if you haven't yet subscribed to Blogger Guider, and it's [NEW] YouTube channel, then subscribe to it today and be ready for fresh posts and videos.
So yes, let's come to the thing that I am going to tell you today, the most awaited thing for which bloggers have waited a lot.
So, users of BlogSpot have got their gift. I mean, users of BlogSpot domain who haven’t bought any custom domain. The gift is: SSL Certificate for their domain. But what about blogger blogs with the custom domain? Will they have to wait more? No comment.
Well, see the address bar and you’ll find that Blogger Guider has SSL Certificate, and it is powered by CloudFlare and because of this, our blog’s loading speed has also reduced!
Blogger Blog WIth HTTPS (Custom Domain)
screenshot_72So, 1.46s for a 4.6 MB is not bad. Compare this with other blogs or websites with similar page size and you’ll find that they load slower. That’s the effect of, yes, right-CloudFlare. CloudFlare is a CDN service which is FREE to use, and we’re going to use this service only, with some JavaScripts to move your blogger blog from HTTP to HTTPS and in bonus, you’ll get a boost in your blog’s loading time.
Now, I’d like to make this clear in starting, that, I do not recommend using the thing I am going to share. No, don’t take it that negatively. I mean to say, I’ve used CloudFlare’s free plan in this post but, I highly recommend you using their Pro Plan which costs only $20 per month. Well, when you have a good blog + good income, then investment in right things is also important.
So, without wasting your time, let’s start!

Why Moving To HTTPS Is Necessary Or Recommended?

Everyone know Google gives a slight boost to the rank of sites which are HTTPS enabled. But slight increase. That is negligible if you ask me. But, the twist probably is, in future, according to what I have read so far, Google will increase the effect of this “boost” and that time, you’ll be jealous of WordPress sites.
So, you’ve got the reason to follow this guide but, let’s first read some important points:
  1. Your traffic will be down for few days until Google correctly indexes all your URLs with HTTPS.
  2. During this all process, if you made any mistake, then your blog can go down for few hours (so, consider doing this all after 12 AM if you get most of your traffic from India)
  3. You’ll have to remove all the widgets that are hosted/attached to non-SSL hosts.
Please Note: If you’re not that techy or are new to blogging or terms like “Hosting,” “CDN,” then I’ll not recommend you going further. Instead, look at this section.

Also, I'm not going to elaborate all the things. I'll explain only main-main things to keep this short guide, short.

Moving From HTTP To HTTPS

So, let’s start the process. Firstly, we’ll change the default nameservers. In my case, my domain registrar was GoDaddy and so, in this post, I’ve shown the settings of GoDaddy only. If your domain registrar is not same, then see this section of the post.
  • Firstly, sign into your domain registrar (in our case, it’s GoDaddy)
  • Open DNS Manager, now open a new tab
  • Open CloudFlare sign up page and sign up there and then, you’ll get this page:
  • screenshot_77
  • Now, type your domain in the box given and click “Scan DNS Records.”
  • After about 60 seconds, CloudFlare will complete scanning your domain’s DNS records, and now you’re ready to do some manual action.
  • Go to your Domain Registrar’s DNS manager and then, you have to copy all the DNS records from Registrar’s DNS manager to CloudFlare DNS manager.
  • It’s easy. You just have to copy all of them, except the ones that are already on CloudFlare. Just do it one-by-one and this will get done within some jiffies.
  • Now, for this tutorial, we’re going to use their “FREE” Plan which is limited to limited SSL (elaboration- your site will not open up in older Androids and mobiles).
  • In the next page, you’ll be asked to choose plans. Choose FREE just for now (we highly recommend Pro Plan)
  • Now, you’ll be given two nameservers, and it’s the time to place those nameservers on your domain registrars to enable CloudFlare to get control over the blog.
  • Now, go back to your registrar and find settings to change nameservers. In GoDaddy, it is- Settings > Nameservers > Manage

  • screenshot_81
    screenshot_82
  • Change Nameservers to ones that CloudFlair has given you and save. Within some time, your CloudFlare account will be ready and faster.
Till now, what you’ve done, or we've done is the setup of CloudFlare on our TDL domain, and now, the real purpose of this guide begins.
  • Firstly, go to “Crypto” tab and select “Flexible” from “SSL” card’s dropdown as shown in the picture below:
  • screenshot_83
  • Congratz! You’ve successfully enabled SSL on your Blogger blog. Try visiting your blog with “https” followed by your domain.
  • Now, we have to redirect HTTP version of our domain and all subdomains from HTTP to https and to do this, “Page Rules” will help us.
  • Head over the “Page Rules” tab and add three Page Rules as shown in the images below:
  • screenshot_84screenshot_85screenshot_86
  • Be sure that these Page Rules are in the same order.
  • Now next step: head over “Firewall” app and from the “Security Level” card, set it to “Low” and log out from CloudFlair because now there’s nothing to do with it.
Now visit your blog. You’ll see that your blog is being redirected to HTTP all the time whether is it a subdomain or the main domain and keeping the directory (characters after the domain). Now, what’s next? You should not forget that the links in your blog do not have “HTTPS” in their starting and to let Google know that you’ve moved to HTTPS and get your new URL indexed faster, you should change all your blog links from HTTP to HTTPS. But, how? It’s a hectic task! But we’ve made it simple.
  • Open your blog’s template HTML
  • Search for `</head>` and paste following code above it:
  • <script>
            $(document).ready(function() {
              $("a").each(function() {
                var i = $(this).attr("href");
                var n = i.replace(http://www.yourdomain, "https://www.yourdomain");
                                  $(this).attr("href", function() {
                  return n
                })
              })
            });
          </script>
  • Now here comes the coding part. Search for the following code in your template:
    <b:include data='blog' name='all-head-content'/>
  • Remove it and below “<head>” paste the following codes:
  •       <link href='https://www.yourdomain.com/favicon.ico' rel='icon' type='image/x-icon'/>
          <meta content='blogger' name='generator'/>
          <link href='https://www.yourdomain.com/feeds/posts/default' rel='alternate' title='Blogger Guider - Atom' type='application/atom+xml'/>
          <link href='https://www.yourdomain.com/feeds/posts/default?alt=rss' rel='alternate' title='Blogger Guider - RSS' type='application/rss+xml'/>
          <link href='https://www.blogger.com/feeds/BLOGID/posts/default' rel='service.post' title='Blogger Guider - 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]-->
  • Now, see for any unsecured (without HTTPS) link in your template and replace them with secured ones if you have found or alternatively, upload them to your own host.
  • Last thing and the most tedious task- if your images are not SSL certified or are not hosted on SSL compatible or secured host, then please upload them to any free hosting services like postimg.org that are SSL enabled and replace those images with SSL certified images. Once you are done- congrats, you’re 80% done!
Remaining 20% is settings you’re going to do in Google Search Console and Robot.txt.
  • Go to Blogger > Settings > Search preferences > Crawlers and indexing > Custom robot.txt
  • Edit it and use the following code instead of the one you’re using currently to make it SSL Compatible:
  • User-agent: Mediapartners-Google
    Disallow:
    User-agent: *
    Disallow: /search
    Allow: /
    Sitemap: https://www.bloggerguider.com/sitemap.xml
  • Now save it and head over Google Search Console.
  • Add your domain in all the following four ways:
  • http://yourdomain.com
    https://yourdomain.com
    http://www.yourdomain.com
    https://www.yourdomain.com
  • Now after adding the first three and while adding the fourth one, submit your sitemap. Please note that you are not required to submit sitemap from every domain I’ve listed above. Just while adding the last one (https://www.yourdomain.com) submit the sitemap.XML file.
  • Now you’re ready, and your blog is fully SSL compatible. :)

Don’t want to do this all and make your hands dirty?

Hm…so this was a long and techy process. Why you’re willing to do all this when a professional can do this for you? I’ve collected people who will do this work for you at a very reasonable cost. Plus, if you want any kind of information about SSL or about any other things, you’re welcome to our try our service. You can contact me here and get your work done within some minutes.

Cons Of This Early Adaption

There are some disadvantages (plus, the solution of them) of using this method to move your blog from HTTP to https. These are giving below followed by their solutions:
  • After moving, you’ll not be able to forward any of your subdomains to any URL –
    SOLUTION – Suppose you want to redirect fb.yourdomain.com to facebook.com/yourdomain, then, navigate to CloudFlare DNS manager and their, add a CNAME with “Name” subdomain (for fb.yourdomain.com, it will be “FB”) and with “Value” ghs.google.com. Then, link it to a blogger blog and redirect that blogger blog to any blog/website. For example, see contact.bloggerguider.com. We’ve used this simple trick to redirect contact.bloggerguider.com to support.bloggerguider.com.
    SOLUTION 2 – Use “Page Rules” to forward but they’re too limited in numbers.
  • You’ll not be able to move back, and when you try to, you’ll lose traffic. No solution, this will happen with any domain.

Final Words

I hope you’ve liked this guide and proudly, I can say that we’re the first on the web to reveal this trick which works like hell. If you’ve got any problem, be sure to contact us. Share this blog post to let more people know about this fantastic guide, thanks!