Blogger HTTPS, Custom Domains, and SSL Certificates! Oh My!

If you’re anything like me, you preferred the blogger platform because it gave you more for free than other platforms. (I use WordPress now) Not only that, but you could easily purchase a custom domain and have all the HTML you could ever want!

 
Now, if you want that pretty green lock with the word “secure” next to it, there are several ways to do it. You obviously could pay for it, but in the mindset of making a personal blog as cost-effective as possible, here is a free way to obtain an SSL certificate for your blogger blog. 
 
First, you need to register for a free account on Cloudflare. Add your domain to Cloudflare and click on “Scan DNS records.” This will take a minute or two to complete, then Cloudflare will provide you with two custom name servers. 
 
You will then need to add these two custom name servers to your domain. To do this, Go to your domain registrar dashboard (Where you purchased the domain, GoDaddy is an example) and 
 
Go to “My account” and look for anything resembling “Domain Settings”, it might be labeled just “settings” based on who you purchased the domain from. 
 
Look for something indicating “custom” for your nameservers, some might have a simple “change nameservers” click on that. 
 

Replace the current servers with the ones provided by Cloudflare.

Make sure you use CloudFlare’s setting “Always use HTTPS”.

 
Next, we will enable your SSL certificate. 
 


Enabling Your SSL Certificate

 

 
In your Cloudflare account, you should see many clickable tabs, you want to select “Crypto” and in the SSL section you want to change it to “flexible.” 

 

 
Next, you will want to set up your redirects. To do this, click the blue tab that says “page rules” On this tab, you can create 3 page rules. Set one of them as “Always use HTTPS” and put your domain in. Use the other two as forwarding URLs, you can mix it up, so for example, for my website, I’d put Sinnersinthehandsofanangryblog.com for one, and the same thing but www in front of it for the second one. 
 

Blogger HTML Editing 

Now, it is time to go back to your blogger account. Click “Theme” and then “Edit HTML”. 

Once you’re there, click in the box and press ctrl + F and type in  /<head/

Right above /<head/ copy and paste this code. 

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


After that, look for this code <b:include data=’blog’ name=’all-head-content’/> and replace it with this code right below <head>

<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='BLOGTITLE - Atom' type='application/atom+xml'/>
<link href='https://www.yourdomain.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]-->

If you want to know how to find your blog ID, go to your blogger like you were going to write a post. Look at the url and you’ll see “blogger.com/bloger.g?blogID=” after the equal sign you will see your blog ID. 


Mixed Content Errors

Because you’re moving from HTTP to HTTPS, you might get a mixed content error. To check if you have one, simply go to your blog’s homepage and press ctrl+ shift + J and a screen will pop up to the right of your blog letting you know if there are any errors. If you do have a mixed content error:

Find this code: <form expr:action=’data:blog.searchUrl’> and make sure you add .https right after “searchurl” so it will look like “searchurl.https’> 

quick tip: some themes don’t show that exact code, so I recommend searching for data:blog.searchurl when you press ctrl +f, because all of them should have that code. 

Also, if this doesn’t fix the problem, copy and paste your entire HTML code and put it into notepad. Notepad has this cool feature where you can change a specific thing very quickly. 

Copy and paste your entire HTML code into notepad and hover over “edit” and click replace. There you will ask notepad to replace all instances of  HTTP:// with HTTPS:// , After that is completed, copy and paste it into your edit HTML section, replacing the old code. Click save and view blog and refresh the page and you should see the beautiful green secure lock on your website!

 

Steps after your Success
After you have successfully done this, I recommend you go to your blogger dashboard and find the “Search Preference” settings. In the crawlers and indexing section, replace the current .txt file with this one. 

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

Now save. After doing this, you need to resend your sitemap to Google because it is now HTTPS. In Google WebMaster add your site as a new property like this https://yourdomain.com. After you submit it and verify it through Google WebMaster, then submit this to your sitemap.XML  https://www.yourdomain.com/sitemap.xml 

Conclusion 

If you have any questions about this or run into any problems, feel free to use the contact form or comment on this article and I will assist you the best I can. 

Facebook Comments

Leave a Reply

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