How To Freely Migrate From HTTP To HTTPS On Blogger Blog


Do you want a secured experience between you blog and your audience? Do you want to make your blogger blog more professionally? Do you want to make your blogger blog secured and fast loading? Do you want your blog to be fully SEO optimized? You seem to be at the right place buddy.




    How To Get SSL HTTPS Certificates On Your Blogger Blog For Free.


    We all know that Blogger platform is giving the free SSL HTTPS certificates for Blogspot subdomain blogs (.blogspot.com), and it is a nice gift for your blog. But sadly this feature is not available to bloggers who use custom domains. Google will release this feature soon for the custom domain also, but we can't wait for Google to do that before we can enjoy the benefits attached to it when you can get the free SSL certificates on your custom domain. Yes, you read that right!
    You can enable the HTTPS on your blogger blog even if you are using a custom domain name for your blog with these guide am going to share with you today.

    But what are the benefits of migrating? - Advantages of using HTTPS on Blog.
    HTTPS in the increase of SERP ranking, and Google will rank the 30% of the websites on the first page which are SSL certified, so you have a great chance to make your blog more SEO optimize and beat your competitors, this is also applicable to other search engines

    Your Blog will look more professional.

    It will protect your blog from hackers.

    SSL Certificates make your blog secured and faster

    And What are the cons behind enabling the HTTPS certificates on Blogger blogs.
    During migrating your blog from HTTP to HTTPS your, some traffic will decrease for few days until Google crawls and indexes your all URLs with HTTPS.

    Once you completely migrated to HTTPS then you’ll no be able to remove the HTTPS, and when you try to remove then you’ll lose your traffic, and maybe Google will deindex your blog.

    Now let's get started!

    Steps To Setup HTTPS On Your Blogger Blog For Free

    Introducing Cloudflare CDN

    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 its free plan is just enough to enable SSL on a blogger custom domain and not just that you can also enjoy free add-ons on the free plan.

    What is CDN
    What CDN simply is, 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.

    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.


    Now you’ll need to add your domain to it and click on “Scan DNS Records.”


    After adding your domain, it will 1 minute to scan your domain’s DNS records.
    Once sanning progress is completed, CloudFlare gives you two custom name server, and you need to replace those with your default domain name servers.

    The steps below will guide you to Update your DNS to Cloudflare’s nameservers.

    1. Open your Domain registrar dashboard or My Account page, then Go to your Domain’s Setting

    2. There you’ll see something like “change nameservers” or something like nameservers

    3. Then you need to select “Custom Nameservers” and add the Cloudflare’s nameservers which are provided after added your domain name.
    Once you replace your nameservers with Cloudflare’s nameserver, means your domain is now using the Content Delivery Network.

    It will then take at most 24 hours to propagate. But that doesn't stop us from continuing. We will continue with the setup and before 24hours, everything will start working automatically.

    Go back to CloudFlare and click "Continue".

    Howdy! You have just setup CloudFlare on your custom domain name. Your account will not be active yet. Because the Nameservers are still propagating.

    Enable HTTPS (SSL Certificate) For Your Blogger Domain Name.
    Now you have to enable the free https on your blog. Using CloudFlare free shared SSL we are going to enable HTTPS on your blogger blog. What blogger couldn't offer to us!

    Follow below steps to enable SSL certificates.

    Go To the “Crypto” tab on CloudFlare’s accountThen select the “Flexible” option from the SSL section.

    You’ve successfully enabled the SSL (HTTPS) Certificates on your Blogger blog’s custom domain.

    Redirect domain, sub-domains, and Permalinks from HTTP to HTTPS
    This is the most important part of this guide because you’ve to let your blog stop using the old HTTP and redirect your blog to new SSL (HTTPS). Follow all below steps carefully.

    Go to the “Page Rules” tab and then you have to add 3 Page Rules as shown in below images.But remember you need just to change “techspulse.com” with your “domain name”.


    Rule 1
    if the URL matches: http://*techspulse.com/*

    Locate and Click Settings, Set it to "Always Use HTTPS".

    Then click "Save and Display"


    Rule 2
    if the URL matches: http://techspulse.com/*
    then the settings are: Forwarding URL >> 301 - Permanent Redirect.
    Bottom URL: https://www.bloggingprince.com/$1
    Then click "Save and Display"

    Rule 3
    if the URL matches: https://techspulse.com/*
    then the settings are: Forwarding URL >> 301 - Permanent Redirect.
    Bottom URL: https://www.bloggingprince.com/$1
    Then click "Save and Display"

    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.

    After creating all 3 Page Rules correctly, Go to the “Firewall” tabIn the Security Level section choose the “Low” option.Now we no need of Cloudflare anymore, so log out your Cloudflare account.

    Now open your blog, and you will see that your blog’s homepage is automatically redirecting to HTTPS version. But now your blog’s permalinks is not in the HTTPS version, so we need to make all of them HTTPS and redirect the complete blog from HTTP to HTTPS.

    Congratulations...

    Your blogger blog has fully moved to HTTPS but then you need to give it a few hours to see the changes.

    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 you know if you have mixed content errors? If your blog load showing HTTPS and then shows an info sign after loading then your blog is faced with a mixed content error.
    How do you fix this?

    Replace blogger default Search Box
    Using default blogger search box, might cause problem with the mixed content error.

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



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


    If found, replace it with the below code.


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

    Replace all HTTP with HTTPS
    Go to themes > Edit HTML > Using CTRL + F and search for HTTP. You would find a lot of URLS. Now all you simply need to do is replace all these HTTP with HTTPS.

    Now the last setup, Replace all "blogname" with your domain name and "BLOGTITLE" with the title of your blog.

    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]-->

    Save your template.

    Conclusion
    I hope the guide helped you towards enabling HTTPS on your blogger blog, Trust me I am very much happy about that, if you encounter any issues setting this up, kindly use the comment box and i will reply you ASAP... You could also hire me to do the setup for you while you relax at a very cheap rate, Enjoy TechsPulse!
    TAG