I had promised this post last week, but since I was under self imposed pressure to complete the
TV Console project, it had to wait until today. I have tried to keep this brief, but this post is sort of long, so pack a lunch…
Inspiration
Since I was renovating my blog to feature a selling area, an organized and
reasonably attractive design was critical, but what should it look like? To get my creative juices flowing I started looking around the
Internet for inspiration. I had always liked the look of Christian blogger and writer,
Tim Challies’ site – recently updated. Tim had the resources necessary to have his blog professionally designed, and it shows. It is clean and well organized with a great use of white space. A woodworking blog I like is
Combray Furniture Studio. Chris does a great job of taking a previous generation Blogger template and through careful use of color and font selection, established a modern, minimalist look (well written and nice photography helps too – and you’ll have to get Chris to tell you the story behind his nice header graphic).
But what really kicked things into high gear was a blog post called “
100+ Clean, Simple and Minimalist Web Designs” at
Hongkiat.com – some really cool looking websites, although all of them are custom designed (I think, I never made it through all the examples in that post). I began wondering if I could at least add a custom look to a standard Blogger template.
Hummm...
Testing, testingTo achieve the new look, the first thing I did was establish a test blog. With Blogger, it costs nothing to set up an additional blog where I can fine tune a template. I always password protect such blogs; that way no one can see what I'm up to. I have almost always had a test blog - I've often used it to compose posts making sure everything is
formatted correctly (video embeds fit within the template, etc.), and then copy the post HTML over to my main blog.
In addition to Blogger being free, many third party blog templates are free. I searched the net to see what was available. After viewing some, even adding a few to my test blog, I decided to go with the proven
Our Blogger Templates. They have many to choose from and all are well designed and highly customizable. I have used five of their templates on various blogs and they are smartly designed, but best of all, they're free.
The winning template. A screen shot of OBT's PSI template, looking nothing like mine.
After careful consideration, I chose
OBT’s
PSI template. Here is why:
- I wanted a link bar, but wanted to eliminate the separation between the header and rest of the blog as much as possible. The link bar being at the top helps accomplish this.
- While I wanted a three column blog, I wanted as much post width as possible. PSI has a narrow left sidebar giving more space to the post area as well as the right sidebar.
Something I didn't like about PSI were all the lines and the compartmentalized look (see an image of the whole template
here). While standard Blogger templates are more flexible than ever,
OBT templates go crazy in this regard, providing many easy options for customization. My blog design is achieved through the use of color, font selection, a simple logo and only a small amount of HTML alteration (One note: Our Blogger Templates do not support the Blogger social media and share buttons that are now available for the post footer area).
About color
If you want to play around with color, then you need to be aware of the
Internet’s color playground,
Kuler by Adobe. I happened upon this site one day and was fascinated by the number of people who have a deep interest in combining color in cool and different ways.
All about color. Adobe's Kuler site - for the color connoisseur.
At
Kuler, you can pick a base color and it will offer many different options for companion colors. Or you can simply choose from the many color combinations others have created. I used a lot of color with my last blog design and
Kari Hultman uses some strong color at her blog - so consider how color can be used to create a unique web presence.
An important feature of this site is that you can convert the six digit color code used with web templates into
RGB color numbers used in paint programs. This was important when matching the dark burgundy color of the link bar with the color used in my logo.
Kuler is great tool for web design and it is totally free to use.
While my last blog design had a five part color scheme, I decided to keep it simple this time, opting for burgundy as the main color and using two khaki colors along with grey as very subtle accents.
Editing blog templates (the HTML/
CSS code) can be fun, but an easy way to eliminate many of the lines that section off the PSI template is first set the background color and then simply make the various borders and lines that same color. I first eliminated all the lines and then added some here and there to see the effect. I did go into the template HTML and alter the weight of the line that surrounds the post area. I also deleted a line that separated the side bar gadgets, changed the standard uppercase text for the
link bar and the sidebar gadget titles and finally, I deleted the navigation bar that appears at the very top of most Blogger blogs. One last thing - I altered the justification to "left." The standard setting for PSI is full justification which can make some
sentences and even post titles look odd.
My logo and headerI wanted a more unique logo this time around. I Googled “fever image” and found that a flame was sometimes used to denote the heat associated with running a fever. I had already decided to use the standard Blogger font, Georgia, in my logo, so after playing around with it, I went with a lowercase design and had my daughter draw the flame. Some header graphics are really big, comprising
all of the viewable screen and
some are very narrow. I purposefully decided to make my header more narrow this time (I don't endorse either of these sites; they were selected based solely on their header graphic).
I did consider having my logo professionally designed going as far as contacting a designer whose work I admire. An initial rough cost estimate to design a logo was $500 - $1,000; an instant deal breaker (I could buy a really big
honkin'
jointer with that kind of money). See some tips on
logo design here.
Spending some moneyI did hire one thing to be completed. I wanted a somewhat compact grouping of subscribe/Twitter/
Facebook buttons like you see in the top right corner of
Challies.com. I searched the net and was unable to find a gadget with all of this combined. So I hired a programmer to do this at a cost of $25.00. This was money well spent since I had worked a couple of evenings trying to do this myself. I got close, but was unable to achieve the look I wanted.
I then just kept tweaking everything until I liked it. This renovation cost me a total of $25.00. After blogging for three years on a variety of different blogs, to date, I have spent a grand total of $35.00 (I pay Google annually $10.00 for my URL). The great thing about Blogger is that it is yet another product from Google that is an amazing value. Think about it, you can establish an
Internet presence and operate a highly customizable blog for free or nearly for free.
In short, some inspiration, a place to play around with the design (the test blog), a very flexible third party template, a new logo and a simple color scheme led to the new look of my blog. All of this can be achieved at a very low cost and most all of this is within the means of the beginning blogger. So, what have you done, or plan to do to update the look of your blog?
