Set a custom domain for your blog with BlueHost

A custom domain gives you a much more personal touch when it comes to publishing your blog. If you have an existing website, and want to use a subdomain to point at your Blogger blog, here's how to set one up if you're using BlueHost - though the same concepts apply to all domain vendors.

Add your custom domain to your blog

Navigate to Settings => Basic.

The setting for adding your custom domain.

Click '+ Set up a third-party URL for your blog'. Enter your custom domain, including the subdomain that you want to use. Currently, Blogger requires you to use a subdomain, with the option of redirecting the naked domain to that subdomain. Here's some examples to clarify what naked domains, domains, and subdomains mean. Say you own example.com as your domain.

 Top Level Domain: .com
Naked domain (no subdomain): example.com
Subdomain 'blog': blog.example.com

 If you then choose to redirect your naked domain to your blog's subdomain, visiting example.com would result in a redirect to blog.example.com.
An example, using subdomain 'blog' on domain 'example.com'

If you click 'Save', the setup will fail, with instructions on the verification process. 

 Note: If you've verified ownership of the domain on another one of your blogs, you won't need to verify a second time. You will, however, need to use a different subdomain. blog2? another-blog?

Verifying your domain

After you've attempted to save, if this is the first Blog that you're setting up for the domain, you'll get an error that your domain has not been verified.
CNAME entries that you need to add to your domain's zone records.

Now, you just need to head over to your domain registrar's settings. This example is for bluehost.com, but the same concept applies for all domain vendors - you need to add two CNAME entries.
  1. A CNAME for the subdomain you want to use (in this example, 'blog') which points to google's nameservers, which will then have a record that your subdomain points to your blog.
  2. A CNAME with a magic code, so that Google can verify that you actually own the domain. This is a security feature to prevent domain hijacking!
The zone settings on BlueHost are found under Domains => Zone Editor.

1. A CNAME for your subdomain, pointing to ghs.google.com

2. A CNAME which verifies you own the domain, as per the instructions from Blogger.

It can take a while for your DNS changes to propagate, but once they're out, Google's servers will have verified that you do, in fact, own your domain, and you will be able to save blog.example.com as the custom domain for your blog!

Happy Blogging.


Comments

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes
Read more