All About the New Look for Blogger Buster

First of all, I just want to say a great big THANK YOU to everyone who commented or emailed me about this new design :)

I'm really happy to know that you all enjoy this new look, and hope you'll find the site is now easier to navigate to find the information you need.

Now that the Blogger Buster makeover is almost complete, it's time to explain all the changes which I've made. Over the next few weeks I'll be writing up tutorials for most of these features, so if there's anything I've missed out be sure to let me know!

The Header Section

Many of you will recognize the overall layout of the header section from the Blogger Template Design tutorial, The Easy Way to Create a Great Blog Header.

I hope my design shows how the space in the header section can be put to good use!

The New Logo

The old BB logo didn't feature any indication of what this site is all about, so this was the first thing I redesigned!

Now it's instantly recognizable, though it still features the original red "B" which is part of the Blogger Buster "brand"!

The new font used for "Blogger Buster" is 321 Impact which you can download for free from DaFont (a great site for free fonts!)

Twitter Updates

I've recently discovered the benefits of using Twitter: not only can i keep you updated about the site, I'll be using tweets as "mini posts" to let you know of other interesting things too!

If you like, you can follow my updates on Twitter, or simply check back here to see what else I may have twittered.

Search and Navigation

The customized Blogger search box and the iconic navigation list are two features I've already posted about in the Blogger Template Design Series. Using these methods, I made these features match the overall color scheme of the site, and draw attention to important links.

Note: the "links" link is currently inactive because I haven't yet finished writing the page where this is going to lead. But it will be online and available soon. This page will be worth the wait, believe me!

The Main Posts Area

As in the previous template, the main content area has a paper style background with the page curl. But on the home page, you've probably noticed a vast difference in the overall design layout!

This is the area where I focused on creating a "magazine style" for the blog. The main thing I love about magazine styling in other (Wordpress powered) templates is the ability to have recent posts from various categories listed on the front page in grid/box areas.

I was able to recreate this in Blogger using label feeds of the main categories, which are highlighted with the sideways category titles. The "recent posts by category" section only appears on the home page (using conditional tags), along with an excerpt of the most recent post, which was achieved using the selective post summaries hack.

I would have preferred to show a different icon or small image relating to each post, though this has proven quite difficult so far. Instead I'm working on a different idea, which of course I will share if it works!

A Better Post Options Box on Item Pages

While I still use the 'post options' box on each post page, I decided it was better to add social bookmarking links here instead of the unused "Email this Post" and "Contact the Author" boxes.

New Sidebar(s)

The old style sidebar was getting too long, and the available space certainly wasn't being put to good use. So after a long time thinking about what I needed here, I decided to split the sidebar into two, while maintaining a wider section across the top which includes the most prominent features.

The "Featured Posts" Slideshow

Of all the new features I've introduced int he redesign, this is the one I love the most!

I first saw this used in Justin Tadlock's latest Wordpress theme and was instantly inspired. This "slideshow" is powered with JavaScript, rather than Flash, which ensures it's friendly to search engines. It did need a few tweaks to display properly in IE6, but it's not as difficult to use as you may think ;)

As it stands, this "widget" is coded into my actual template. It doesn't work when placed into an HTML/JavaScript widget for some reason, though by the time I come to write up the tutorial for this, I hope to have made it a little more user friendly for you all!

Do You Like The New Blogroll?

On my home page, you can now see my "blogroll": a list of the sites I read daily in regards to blogging/designing. All of these links have a recognizable icon to the left, and the links are well optimized for search engines: my way of generating a little 'link love' for these inspiring and well-written sites!

The Labels List

As part of the redesign, I have filed all the posts under a better labellings system, which should help you find posts of interest more easily. Furthermore, I've optimized these links for search engines by adding titles to the links, and styled each list item in a different way to other lists in the sidebar. You can read about the SEO for links in Blogger templates in the article I wrote for BloggingTips.com.

Feedburner Subscriber Count Widget

Here's another feature which I'm rather happy about: the widget which displays my subscriber count in the bottom of the left sidebar. The count updates daily (usually a few hours after Feedburner's update on my stats) and is generated using PHP and Javascript with a background image. It's a fairly simple widget to use, though I will warn you all in advance that you must be able to host PHP and Java scripts for this to work in your own templates.

The MyBlogLog Recent Readers Widget

Now while the new MyBlogLog widgets are lovely and shiny, they just didn't fit well with my overall theme! Using a little CSS magic, I was able to customize the original widget to better suit this site. This trick is really easy to do, and will probably be one of the first tutorials I write up (unless you have some burning questions about the other features which you'd like me to post about first?)

Known Issues

There are still a few things to finish or fix, including:

• The "Links" link in the header navigation is currently inactive (I haven't finished writing the page for this yet!)


• Both the Templates and Tutorials links in the header will soon lead to seperate resource pages, where all tools and templates will be listed on a single page.


• In Netscape 6, the footer sections may slip beneath the sidebar, which shall be solved as soon as I can figure out the problem (thanks to Kit for pointing this out!)

I'll solve these issues as soon as I can. In the meantime, if you notice any other problems with the site, please let me know about them!

So What's Next?

Over the next few weeks, I'll be posting about all of the features above as part of the Blogger Template Design series so be sure to subscribe to the feed if you're interested in using these techniques in your own Blogger templates!

Should I create a Magazine Style Blogger template for download?

This is something I've been mulling over for a while now. I'd love to offer a free magazine style theme for Blogger, but like all Wordpress themes of this type, anyone downloading and using such a theme would need to do a huge amount of customization for themselves. It's simply not possible to create one which will work right out of the box!

So let me know what YOU think! Are there many who would be willing to go into the template code, change certain settings and (perhaps) learn how to write their posts a little differently for the sake of a magazine style theme? If enough people ask me for this, I will be sure to create one, though this may well take me a couple of weeks to write up!

I hope you've enjoyed reading how I've created this new template. If there's anything I haven't covered here, or a particular feature you'd like me to write about first, be sure to let me know by leaving your comments below.