Easy Splash Pages in Blogger Sans JavaScript or CSS

Remember splash pages? They were really popular in the 90s. These days, not so much. SEO freaks advise against them, and for good reason. When was the last time you let a 'Flash intro fully load? How many websites do you have bookmarked past the splash page? Out of the thousands of websites I've visited in my lifetime there's maybe ten splash pages I can recall that didn't annoy me. With that said, this guide will show you how easy it is to give your Blogger blog a splash page! No JavaScript, no CSS tricks, just pure Blogger markup. Get excited!

The Code Snippet

I'm switching things up today. First I’ll show you the code snippet. Then I’ll explain what it does and how it works.

<b:if cond='data:blog.url == "http://example.com/"'>
<a href='http://example.com/?m=0'>GO TO HOMEPAGE</a>
</b:if>

What It Does

Visitors of example.com or example.com/index.html will see the “GO TO HOMEPAGE” hyperlink and be directed to example.com/?m=0 where the hyperlink won't be displayed. All hyperlinks will be appended with the m=0 query parameter.

How It Works

You may have noticed the m=1 query parameter appended to every link on a mobile template. (I’m guessing the "m" stands for Michigan?) In mobile view you have the option to “View web version.” Doing so changes 1 to 0. This effectively gives you three different ways to style any given page of your blog. You could make up your own query parameters but m= is special because Blogger’s back end does all the work.

Caveats

When you leave a comment in web view the query parameter doesn’t carry over to the next page. Thus any links to the homepage are links back to your splash page. It’s a vicious cycle! Interestingly, this doesn’t happen when m=1. It might be a bug but I’m not so sure Blogger sees it that way. I mean, if you leave a comment on a page without query parameters it’s the same as when m=0, right?

UPDATE (1.10.12): Brett Morgan sent the following tip on the Blogger Developer Group.

One of the guys on the team had a good look at your tutorial, and came up with the suggestion of possibly using either HTML5 localStorage or cookies instead of overwriting the mobile param. =)

So yeah, for this to work 100% you're kind of forced to use JavaScript. Damn, we were so close! Or wait, just disable comments. Or maybe use a 3rd-party comment system instead—which would require Javascript. Double damn! How badly do you want this?

Closing Thoughts

If you don’t care about SEO then go for it, I guess. I was looking into archiving an old website using Blogger. An old website with a splash page, also frames. (Gasp!) I don’t plan on it being visible to search engines so anything goes I suppose. I just want to see if it’s possible. Maybe you’ll find a better use for this code snippet than splash pages. If you do, share your findings in the comments.