I have a schizophrenic blog. Some days I upload copies of postcards that I receive. Other days it’s info about migration to Australia in the 60’s. And then it might be some photos of family and friends.
So it’s a bit of a mixed bag.
Which is fine by me. My attention gets pulled all over the place, and I get interested in lots of different things. A bit like Homer Simpson walking through a shopping mall 🙂
But it could make life hard for my readers, so I recently added a little Javascript widget that makes the blog change its appearance depending on what interests you. Coupled with judicious use of blogger labels, it works wonders.
It’s the same blog, but it changes shape depending on how you get to it.
Have a look at these two different links to see what I mean.
First if you’re interested in Postcards go to the blog via the URL: http://neilius.blogspot.com/search/label/Postcards?pcd=1.
Second if you’re interested in Ten Pound Poms go to the blog via the URL: http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms?tpp=1.
(Hint for the uninitiated “Ten Pound Poms” were migrants who came to Australia from Britain between 1950 and 1971).
There are two cool bits to this.
The first is that you get a totally different set of links at the top of the blog depending on how you view it. I do this by adding some query string parameters to the URL. (The “?pcd=1” or “?tpp=1” parts of the URL).
Secondly, using labels in the URL lets me control what articles appear when you visit. (That’s what the “/search/label/…” bit of the URL is all about).
You might think using query strings on your URL is a messy way to get to your blog. But it’s really easy to set up a domain and (using something like ZoneEdit’s “webforward”) point that domain to a more complex URL.
For example, http://TenPoundPoms.com and http://Postcards.NeilEnnis.com both point to the same blog, but I’ve used ZoneEdit to add different parameters to the URL query string.
A small Javascript widget at the top of the blog looks at the query string, and decides what sort of links to display. Basically it’s saying “If you’ve come here to look at postcards, I’ll show you some postcard links. But if you’re interested in Ten Pound Poms, then I’ll show you some different links instead.
Here’s the code. The Orange section is a javascript function to pull the query parameter out of a url. The Green section controls what gets displayed when people are interested in “Ten Pound Poms”. The Blue section is what gets displayed when people are interested in “Postcards”.
<script>
function gup( name ){ name = name.replace(/[\[]/,”\\\[“).replace(/[\]]/,”\\\]”); var regexS = “[\\?&]”+name+”=([^&#]*)”; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return “”; else return results[1];}
</script>
<script>
var tpp_param = gup( ‘tpp’ );
var pcd_param = gup( ‘pcd’ );
if(window.location.href == ‘http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms’)
tpp_param = ‘1’;
if(window.location.href == ‘http://neilius.blogspot.com/search/label/Postcards’)
pcd_param = ‘1’;
if(tpp_param == ‘1’)
{
document.write(‘<div id=”tpp-info” class=”sidebar section”>’);
document.write(‘<h2 class=”title”>Ten Pound Poms</h2>’);
document.write(‘<a href=”http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms?tpp=1″>Home</a> Ten Pound Poms | ‘);
document.write(‘<a href=”http://neilius.blogspot.com/2008/07/about-tenpoundpomscom.html?tpp=1″>About</a> Ten Pound Poms | ‘);
document.write(‘<a href=”http://neilius.blogspot.com/2008/08/links-for-ten-pound-poms.html?tpp=1″>Links</a> for Ten Pound Poms<br/>’);
document.write(‘<a href=”http://neilius.blogspot.com/2008/08/migrant-ships.html?tpp=1″>Migrant Ships</a> – How we got here<br/>’);
document.write(‘<a href=”http://neilius.blogspot.com”>Musings</a> – Back to the main blog’);
document.write(‘</div>’);
}
else if(pcd_param == ‘1’)
{
document.write(‘<div id=”pcd-info” class=”sidebar section”>’);
document.write(‘<h2 class=”title”>My Postcards</h2>’);
document.write(‘<a href=”http://neilius.blogspot.com/search/label/Postcards?pcd=1″>Home</a> – My Postcard Blog | ‘);
document.write(‘<a href=”http://neilius.blogspot.com/2008/05/about-my-postcards.html?pcd=1″>About</a> My Postcards | ‘);
document.write(‘My Postcrossing <a href=”http://www.postcrossing.com/user/Neilius” target=”_blank”>Profile</a><br/>’);
document.write(‘<a href=”http://postcrossing.com” target=”_blank”>Postcrossing</a> – A great way to send and receive postcards<br/>’);
document.write(‘<a href=”http://flickr.com/photos/magictyger/sets/72157604961465429/” target=”_blank”>Postcard Collection</a> at Flickr<br/>’);
document.write(‘<a href=”http://neilius.blogspot.com”>Musings</a> – Back to the main blog’);
document.write(‘</div>’);
}
</script>