TUTORIAL #3: Using Blogger with ASP.NET and Master Pages

I love the Blogger publishing engine, but I am frustrated by the apparent inability to do anything with .NET and Master Pages using it. This tutorial will show you how to get over that hurdle. A special thank you to Sarah Dutkiewicz for this awesome idea.

WHAT? A Microsoft guy is promoting a Google service? Yeah. I do that sometimes. I believe in using the best tool for the job, and in my case, Blogger fits that bill. There are plenty of blogging services out there, but many of them require me to also host a database, an application, etc., and I just don’t want to have to deal with all of that. I want to write my posts, and know they ended up on my site. Plain and simple.

So let’s talk about how we can use ASP.NET with Blogger to get a pretty nice scenario.

1) I am assuming you can set up a blog at Blogger.com.

Go to blogger.com. Follow instructions.

2) Create a new “Web Application” in Visual Studio.

I say to do a “Web Application” because I don’t know what the future holds for your blog. If you want Silverlight, or more complicated things on your blog, it’s a good place to start. You can use “New Web Site,” but you may find your options limited later.

3) Create a new Master Page.

I titled my Master Page the same as my blog. Blankenthoughts.master. You can surely name it whatever you want. Delete all of the provided HTML that is written for you.

4) Let’s get that blog template.

Go to the Template portion of your Dashboard for your blog, and copy the HTML that is provided. (I am assuming you like your current template. If you don’t, take care of that first.) Now paste that code into your Master Page. It’s gonna be gross. Also, as a backup, create a text file or HTML page or something and paste the code in there. And SAVE it. It never hurts to have a backup of the original.

5) Let’s learn an awesome new keystroke.

So you’ve got that awfully unformatted HTML in your master page. Resist the urge to reformat it. I’ve got a faster solution. Press Ctrl + K and then Ctrl + D. Voila, your HTML is formatted.

6) Now we can save our master page.

Go ahead and save your master page, and we also need to create a new ASPX page based on that master page (make sure you check that checkbox). I called mine BloggerTemplate.aspx because this is going to hold the code that I paste back into Blogger. We’re going to be jumping back and forth between the Master Page and the ASPX file quite a bit now, but it’s just copying and pasting, so no biggie.

7) We need to move the <Blogger> tag, and all of its contents.

Somewhere in your Master Page now, there’s a tag called <Blogger>. Cut (Ctrl + X) it from the opening tag to the closing one </Blogger>. In its place, create an <asp:ContentPlaceholder runat=”server” ID=”blogbody”> tag.

8) Create the content in our ASPX page.

We now need to replace that content in our BloggerTemplate.aspx file. Let’s make one edit to our ASPX file before we paste that code in there. I changed my header values that are pre-populated for me. Here’s the only line of code on my ASPX file right now:

<%@ Page MasterPageFile=”~/Blankenthoughts.master” Title=”” %>

Just under that, just add a:

<asp:Content ID=”blogbody” ContentPlaceHolderID=”blogbody” runat=”server”>

Inside that tag, paste the HTML we cut out of our Master Page. When we’re done, Visual Studio is going to be FREAKING out over all of the proprietary Blogger tags we’re using, but it will still build, and that’s all that matters. Just trust that you did it right.

9) Now let’s do the same thing for the other Blogger-specific stuff.

In my case, I also have some META information in the header of my page, archive links to the previous months that I have had posts, and also a section that shows my latest post titles. Each of these use Blogger-specific tags, and I’d rather get those out of my Master page and back into the Blogger template, where they belong. So create a ContentPlaceHolder for each of these sections, and copy that code into a Content tag in your BloggerTemplate.aspx file. Here’s a link to see the source code of my final template file.

10) We’re at step #10 already. Are we almost done?

Yes. But good things come to those who wait.

11) Now we need to change some settings.

In your Blogger Dashboard, we’re going to have to change some of the settings. I’ll just list them here, by the navigation you take to get to them.

  1. Settings > Publishing > Blog Filename: default.aspx
  2. Settings > Archiving > Archive Filename: archive.aspx

I am assuming you’re hosting this blog in an environment that can process .NET pages…so IIS is kinda necessary.

12) Publish your website to your FTP site.

Because of the “We’re going to delete everything” policy of Visual Studio, I prefer to move my files manually. I’d recommend this for you as well, or you’ll be forced to publish from Blogger each time that you modify your website. (Because VS will delete EVERYTHING, not just the files it is overwriting.)

13) Publish your blog from Blogger for the last time.

You shouldn’t be forced to publish your entire site anymore. Well, except when you post something new. But that can also be circumvented by posting from Live Writer. It’s far more robust than the Blogger interface, and works great with the engine.

At this point, you should be up and running. I will be glad to coach you through this if you have issues, because I only encountered about 100 different issues specific to my hosting environment, folder structure, etc. Please let me know if this helped you out…it’s good to know this stuff is providing some value.

kick it on DotNetKicks.com

3 thoughts on “TUTORIAL #3: Using Blogger with ASP.NET and Master Pages

  1. First, I want to thank you for this article. I have a question. I want to pull the recent blogs from different people and show them in one page in my web site. Something similar to what you see on the http://www.asp.net site for the news and/or articles.Thanks in advance for your help.

  2. As a blogger you are able to use any tools and software that can help promote your blog and it is also better if you use some online advertising to help you get instant web traffic.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s