Customizing Blogger

Introduction

I want to start by blaming Markus Eisele for my misadventures. I was looking at his blog and liked the makeover he gave it. I did find the template he was using, but decided that I would write my own. Well I thought this should be an easy thing to do. I severely underestimated the challenge of making a custom template for myself. It turns out that one of the easiest things turns out to be the hardest. Alright Markus you are off the hook... it may just be my bravado, and belief I can build a better mousetrap that led me down the long lonesome road.

Google is well known for having good and sometimes great APIs for their technology. Blogger is an exception to that rule. There is not one clear cut schema for their layout that I can find ironically using Google itself. You figure with all of the templates and bloggers that this would be covered ad nauseum.  It is not though.

Technologies

I was looking for a simple and elegant framework to make my blog sites look professional, and also make them portable. I had the following requirements:

1. Mature framework
2. Can be found on a CDN
3. Easy to use
4. Simple to implement
5. Well Documented
6. Lots of examples
7. Flexible
8. Customizable
9. Response UI
10. HTML5
11. Portable
12. JSF Compatible
13. Works with NetBeans IDE for Tooling

I looked at a number of frameworks including Foundation, and Bootstrap. I ended up choosing Foundation since it seemed to be easier to use for me. Your milage my vary.

The first thing I wanted to know was what was the minimum required for a template on Blogger. I discovered that are a couple of versions of the template: an HTML 4.01 version (v.1) and an HTML 5 version (v.2) which are somewhat a hybrid mix of XML, and (X)HTML. I published the basic templates on Gist as shown below.

I have a couple of different blogs and found them to be different so I thought I would share my findings.

The next thing I needed to find out was what was the minimal template I would need for using with Foundation. The template below uses a CDN to deliver the required JS/CSS. The template below is the culmination of a lot of work to make it work with the visual tools on Blogger. Remember to backup your existing template before installing mine.

Conclusion

I finally have a working blog site using the new template, and will update all of my sites to use it. My personal non-technical blog site was the first to use the new template. It is still a work in progress, but it looks very nice. Take a peek for yourself at John Yeary Blogger site.

I have compiled a list of links that I found helpful in trying to figure out their layouts and tags in the references below.

References

Tags

• Layouts Data Tags
• Widget Tags for Layouts

Template References

• How to Make a Blogger Template : The Body and APIs - This was a comprehensive blog with lots of great explanations.
• How To Create Blogger Template From Scratch
• Blogger Template Design
• Understanding the Blogger Template - 2 - This is an older article, but useful.
• Template of Doom - Another older useful article.

Additional References

• Bootstrap vs. Foundation: Which Framework is Better?