Blogger, GoDaddy, DNS and Domain Names

So having moved my blog to Blogger what's the next step? Why registering a vanity domain for it of course! I started with this Google support guide for reference, this entry is just my thoughts and meanderings on the process.

If you're not confident with DNS configuration (or you just want to keep it all in the family) you may wish to register your domain with Blogger itself. This uses Google Checkout and does all the DNS configuration for you, making it super easy and Blogger friendly.

However I like many digital citizens have a number of sites and domains on the web and I wanted to keep all my products together. Mostly due to the price factor I keep a lot of my domains at GoDaddy.com, they're cheap and cheerful just be careful to only choose the options you want because they keep their prices low by high volume and hard up sell. GoDaddy uses Pay Pal or Credit Card functions rather than Google Check out so keep your details handy. Don't forget that Revision 3 have regular discounts available on their podcasts, so you can feel good about giving them referrals.

Having registered my domain now it's time to configure all the DNS information.

Firstly you need to create a CName and an A Name for your domain and since I have registered my domain with GoDaddy a configuration guide is available here along with many other common domain registrars.

If you are using GoDaddy you will need to access the Zone File Editor from the DNS Manager, it is not an obvious link so look out for it. GoDaddy sets up all domains with a number of 'obvious' CName entries such as FTP or WWW. If you are using another registrar you may need to create the subdomain CName entry. If you set up a CName of WWW then this will allow you to access your site on WWW.YOURDOMAIN.COM, a good alternative might be BLOG or ENTRIES, call it whatever you want!

Once you have created (or confirmed the existance of) your CName you need point to the blogger servers. If you are using a blank domain with no hosting on GoDaddy then the entries you are looking for will have an '@' symbol in the data line. In my case we are using WWW as the CName, this needs to be pointed at the Google server ghs.google.com so I update the configuration like so:

If you wish to have "naked" domains that is a domain that works without a subdomain address for example http://YOURDOMAIN.COM/ then you need to enter 4 AName entries:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

In the GoDaddy configuration this looks like so:

Keep in mind that you need to wait out the TTL time before the DNS server will update your new configuration out to most networks, this is generally a day or two, however if you are in a rush then you may wish to update the TTL time to a lower value so that the new domain updates soon to local networks. Save your Zone File and the DNS configuration is done, now to update your Blogger with the new domain.

In your Blogger account select your blog and then go to Settings --> Publishing. Here you can select a Custom Domain instead of publishing to Blogger, as we have already purchased the Domain at another Registrar we need to choose Advanced Settings to add our vanity domain.

Once this is done you should see confirmation that your Blogspot account is associated with your Custom Domain, but keep in mind you need to wait out the TTL time that you specified in the DNS Zone File editor.

Blogger: CSS styles for code view

Did you like the code formatting in my last post? Adding a small CSS code to your Blogger template makes your code samples stand out and makes them much easier to read.

.codeview { 
font-family:"courier"; 
color: blue; 
font-size: 70%; 

margin : 15px 35px 15px 15px;
padding : 10px; 
background : #f9f9f9; 

border-top : 1px solid #eeeeee; 
border-right : 2px solid #cccccc; 
border-bottom : 2px solid #cccccc; 
border-left : 1px solid #eeeeee; 
}

There are 3 groups of style within this CSS snippet - font changes, box characteristics and border. The background makes the code stand out no matter what the format of your blogger so you can change your template at will. The colour and font face make it feel a bit more like "real" code and the border just adds a little flair. 

To install this style open the Edit HTML tab in the Design settings of your blog:

Cut and paste the code just above the close of the Skin tag in your Blogger template:

]]></b:skin>

When you wish to insert a highlighted code section you use the following template in the Edit HTML tab of your post editing:

<div class = "codeview"> 

%%YOUR CODE SAMPLE%% 

</div>

Remember when you are preparing your post content that you need to convert your code to HTML representations of the ASCII characters (for example < should be converted to &lt; ) otherwise the browser will attempt to execute rather than display the code. 


This can be easily completed with a set of simple text replacements, if you're not confident with the scripting you can use conversion scripts such as these handy examples from Palfrader.

DFP Small Business and Blogger - Javascript in Posts

Being fairly new to Blogger there are still some tips and tricks that are new to me, and maybe to you too.

When I first placed my DFP tags into the previous post they didn't work. Curious I thought! I know that Google is very big on stopping cross site scripting injection and figured maybe this was the reason why the code wouldn't work.

A further inspection of the code however showed a much easier issue to resolve as a user of Blogger.

DFP Small business tagging instructions tell you that you need to put the script loading code into the Header of your webpage, however in the case of CMS systems and blogging platforms like Blogger you can infact paste this code into the beginning of your post.

Here is the code as it should appear:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-8884734375688780");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Bunyip");
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Cat");
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Dog");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>

Here is the code as it did appear in my Blog:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'><br /></script><br /><script type='text/javascript'><br />GS_googleAddAdSenseService("ca-pub-8884734375688780");<br />GS_googleEnableAllServices();<br /></script><br /><script type='text/javascript'><br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Bunyip");<br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Cat");<br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Dog");<br /></script><br /><script type='text/javascript'><br />GA_googleFetchAds();<br /></script><br />

The issue is all the additional line breaks, that is when I had tried to cut and paste the scripting code into the post Blogger had inserted this code into my code automatically:

<br />

This causes the browser to parse the Javascript as HTML rather than Jscript and so the ad placements fail to work because the Javascript pre-loaders are not running.
The good news is that this is really easy to fix!
Go to the dashboard of your Blog and go to the "Settings" tab and then the "Formatting" tab:

Make sure that your "Convert Line Breaks" setting is changed to No like so:
Voila! Your in post Javascript now works as intended and you can put DoubleClick for Publishers ad tags into your Blogger posts!