As I spend more time and effort keeping up and promoting my blog, I spend a lot of time looking at the design, functionality, and content. I can always improve the content, this is a never-ending cycle. Although I was please with the first look of this blog, I knew that I could do better. This post is a chronicle of the changes that I made to the design and functionality. Very few of these changes are my own work, so I will also take this opportunity to give credit to all of those that I learned and borrowed from.
The first and most obvious change was the template. I spent a lot of time looking through all of the "free" templates that are available from all of the various sources on the Internet. My original template was the "Rounders" template. This was a great template that I spent a lot of time customizing and learning how templates work. The skin that I finally settled on was from http://www.ourblogtemplates.com and is the "A Click Apart" template.
This transition was easier than I had anticipated. I removed all of the widgets and customizations from my "Rounders" theme and then uploaded the new template. This is one of the keys to a smooth transition that you don't find on the template sites: remove all customizations from your template prior to trying to install a new one.
Next was the header image. The template is displayed with a very attractive image, but I wanted to make the site more of my own than a copy. With this said, I used the GIMP to create an image of my own. I don't claim to be a graphic artist, but it turned out OK for now.
Once the basic layout was complete, I decided to start my "normal" customizations. These include the sidebar functionality. I don't use the Blogger Widget for search, I have found a nice script that does a great job from Tips for New Bloggers:
<p align="left">
<form id="searchthis" action="http://www.thedailyadmin.com/search" style="display:inline;" method="get">
<strong>The Daily Admin<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
Next comes the first of two scripts that I employ from phydeaux3. This particular script modifies the labels widget to be a customizable tag cloud. I prefer the tag cloud to the static label list because I use a lot of labels and the list takes up too much space for me. The changes are outlined very well by phydeaux3, so I won't go into that here, but I will show the only two changes that I needed to make: font colors.
var maxColor = [83,120,174];
var minColor = [153,153,153];
The next thing that I use from phydeaux3 is an archive calendar. I love this because, it too is intuitive to me and takes up minimal space. This actually uses the default archive widget, but the script customizes the existing widget. Pretty cool, because you don't have to do anything to get a sharp archive calendar.
The next sidebar customization is the addition of my LinkedIn badge. This is a simple script:
<a href="http://www.linkedin.com/in/brianbohanon"><img border="none" src="http://www.linkedin.com/img/webpromo/btn_viewmy_160x33.gif"/></a>
Sticking with the LinkedIn theme, I also added the LinkedIn Profile Popup. Aside from just getting it to work with Blogger (which can be seen in the post "How-to Add LinkedIn Profile Popup on Blogger"), I also had to change the theme to place the data:post.author at the top of the post (my preference, not required) and the style sheet for the data:post.author so that it is an <h4>. I had originally changed it to <h3>, but when viewed in Internet Explorer the font was much too large.
I always see the social bookmarks on really nice blogs and wanted to add this functionality to mine. I had a heck of a time trying to find this. Most all of the posts I found about this were using individual images hosted from another source with links and it was a big pain. Fortunately, I was able to find out not only the easiest, but probably the most thorough method. There is a site called AddThis that provides the code for the button on your site, stats about your button, and they keep up with all of the sites and links. This is great because I don't know (and don't care to know) every social web site on the web. This is a free service and took about 5 minutes to setup from registering on the site to putting the code in all of my posts. Part of the AddThis functionality is Digg, so I removed the individual Digg script.
Just to see what is happening on my blog when I'm not around, I signed up for http://www.statcounter.com which is a free service like Google Analytics. This too, was a super easy change that was just the matter of signing up for the service and adding some script to my site.
I also found a cool little SEO hack that will list the post title in search engines rather than the default site title. I can understand why this would drive more traffic, because in the past when I did searches for my own content it would show "The Daily Admin" in the Google results. This is a really simple change that makes a huge difference. I got this from Blogger Busters.
The last customization that was "new" to my blog was the "Read More..." functionality. I like this because it consolidates the posts on the main page which keeps things looking clean. This wasn't an easy on to tackle, it took quite a few times of trying different ways of doing this to find one that worked. The one that did finally work the way that I wanted it to was from BlogSpotTutorial and was actually the easiest that I had tried (I tried about 10 different ways to do this).
Another change that I made, hoping to drive a little more traffic to my site was to remove all of the embedded Scribd documents that I have been using and replace them with searchable text. Although Scribd provides a cool service, and I have had thousands of views for my documents, search engines can't index those when they are embedded on my site.
The last change (in correlation with removing my embedded docs) was to change the way I displayed code on my blog. In the past I did it in a very difficult way with several div tags and some inline styling, but that had to go. I wised up and created a div style that is present in all of my posts and only requires the following tags:
<div id='divCode'></div>
This makes it much easier for me to post code and less likely to want to embed the documents from Scribd.
WOW! Looking back on all of these changes, there were a lot. It was more than I thought. There are still some additional changes that I am looking into that will add some more functionality, such as previous and next buttons for my posts. I'm not sure that I can have this and the archive calendar coexist.
If you have any ideas or suggestions for improvements on the design of this blog, please feel free to leave a comment.
