I've always thought it was cool to be able to find out what happened in history on a particular day. This used to be limited to encyclopedias and birthday cards, but in the "information age" this type of information is available from a lot of places fairly easily. The more I have been blogging, the more I wanted to incorporate this kind of information in my personal blog.
Since my personal blog is a blogger.com hosted blog, I started searching the blogger.com help and ran across some information on how to do this, but the link was dead. Fortunately, I was able to find a that had it implemented (which I believe is the original) and was able to view the javascript code.
After looking at the code for a few minutes, I decided that it would get the job done but that it could be better. I rewrote it, added some stylesheet definitions, and implemented it on my blog. I posted an entry on how to use it, but thought I would write a more in-depth article.
The idea behind this function is very simple. You pass a properly formatted date string as the only argument to the function, which returns a fully formatted HTML string that can be embedded in your blog. I had the following goals in mind when I wrote this function:
- Simplicity
- Extensibility
- Performance
In order to use this function, you must have the ability to customize the look of your blog. For those of you who are hosting your own blogs this isn't a problem. Those blogs that are on public blog hosting sites need the ability to customize the template you are using. Blogger.com allows you to do this, but GeeksWithBlogs does not.
The first step is to add the Javascript function to your template. The best place to do this is in the <HEAD> section.
Now that you have added the Javascript, you need to include the relevant CSS definitions. This can be done by adding them to an included stylesheet or by including them in an in-line stylesheet. You are free to change them to fit the look of your own blog, but I don't recommend changing the class name. The definitions that I used are:
.on-this-day-header { border-bottom:2px dotted #999; }
.on-this-day { margin:1.5em 0.5em; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; }
Now you are ready to incorporate the function call. This really can be done anywhere in your blog, but it makes the most sense to include it with the date header. This will be different for every blog, but for a Blogger.com hosted blog, you are looking for the section enclosed by the <BLOGDATEHEADER> element. It usually looks like this:
<$BlogDateHeaderDate$>
You need to change the <BLOGDATEHEADER> content so it looks like this:
<$BlogDateHeaderDate$>
If you want to add a new site to the function, there are 4 simple steps to follow. For example, to add the BrainyHistory site to the function:
- Modify the
returnStringvariable to include the placeholder text for your new site. Remember, the order of the entries listed here will be the same order they are displayed, so make sure you put it in the correct spot.
var returnString = "On this day: #Wikipedia# ‡ #HistoryChannel# ‡ #NYTimes# ‡ #BBC# ‡ #IMDB# ‡ #Reference# ‡ #Britannica# ‡ #BrainyHistory# ‡ #DailyBleed# ‡ #OnThisDay#";
- Add the following template variable:
var BrainyHistory = "<a target=\"_blank\" href=\"http://www.brainyhistory.com/days/#month#\_#day#.html\\">Brainy History";
- Add the following fixup code:
var dailyBleed = DailyBleed.replace(/#month#/, (month < 10? "0" + month: month)).replace(/#day#/, (day < 10? "0" + day: day));
In this case, the URL requires some additional logic to fixup the template parameters. This logic should be encapsulated in the template fixup code only.
- Modify the
returnstatement to add the new URL
return returnString.replace(/#Wikipedia#/, wikipedia) .replace(/#HistoryChannel#/, historyChannel) .replace(/#NYTimes#/, nyTimes) .replace(/#BBC#/, bbc) .replace(/#IMDB#/, imdb) .replace(/#Reference#/, reference) .replace(/#Britannica#/, britannica) .replace(/#BrainyHistory#/, brainyHistory) .replace(/#DailyBleed#/, dailyBleed) .replace(/#OnThisDay#/, onThisDay) ;