"New" Blogger Template Resources

Making the move from my "classic" Blogger template to the new template has not been as easy a process as I hoped.

Although the "classic" template code worked just fine, it would not allow me to post directly to it from my (now mandatory) blogging tool, Windows Live Writer.

Additionally, the new Blogger system seems to prefer XHTML code and CSS sheets over the standard HTML code. Just as I was getting a handle on HTML and basic CSS, wammo.

Luckily, I like a good puzzle and Google is a great resource to turn to. In hacking out my new template, I came across the following items that might be good for any "beta" Blogger out there to spend some time at, before making the jump.

Basic Blogger Resources to Know

First it would be a good idea to acquaint yourself with the newer elements under the "New" Blogger system.

Blogger Layout Guide - This page reviews the basic "elements" that make up the new Blogger template system. If you are a "drag-n-drop" blogger, then you really will like the new Blogger. Adding design elements are pretty intuitive as are rearranging them very simply.

Widget Tags for Layouts - Once you graduate past this, you will be wanting to add do some more "hands-on" management of the "widgets" that make Blogger tick. These are the items you are dragging and dropping. This page goes into good detail on how they are structured. I'm still re-reading it but the trick is understanding them in terms of nesting levels. These forum posts by Stavanger at Blogcrowds are also good reads on the subject: Blogger Beta Widgetry and Save your Beta Widgets.

When you switch over from a "classic" template to a new one, you begin by picking one of the "updated" two-column Blogger layouts. If you have certain side-bar items, it will attempt to convert them into appropriate widgets. This sometimes works better for some elements than others. Some are just rendered useless.

Under the new Blogger Template tab, you have four new selection items: Page Elements, Fonts and Colors, Edit HTML, and Pick New Template. The first "Page Elements" is where you have a GUI drag-n-drop builder to manage your template. "Fonts and Colors" gives you some nice GUI tools to change your template element (texts, headings, links, etc.) colors and formatting. What is really nice is that if your template is standardized, it will pick up your color scheme and offer complementary colors for you to use. My template is just "non-standard" enough to not allow that feature to work. Edit HTML tab allows you to download a copy of your template, upload a template file from your local hard drive, as well as hand-code the template. Widgets are collapsed, but may be "expanded" in the template code for additional tweaking. Finally, you can always revert to your original "classic" template if you get things too out of whack. The final tab lets you select new templates.

Third Party Template Sources

As I have mentioned, Blogger does not (currently) offer any three-column layouts. I really prefer this format as it helps us bloggers with lots of "extra" content able to compress it instead of leaving a never-ending column of elements.

I came across a number of web pages and blogs that have free three-column templates that are compatible with the new Blogger system.

Gecko&Fly - This site has a number of beautifully crafted Classic and Beta Blogger Template Designs for you to select from. There are still more classics than betas but it is great place to begin.

Hoctro's Place - This blog site has a number of wonderful elements going for it. Hoctro has a good number of clever "hacks", code helps, and custom widgets to check out. He also has 8 "ready-to-use" three-column templates that require almost no effort to get up and going on your blog. This guy is good!

Blogcrowds - This is mainly a forum for blog templates and helps. There is other stuff here as well. But one of the real gems is the three-column templates for the new Blogger that Stavanger has spun together. You must register first (free) to access them, but Stavanger's work is well worth looking into if you need a three-column Blogger template. That's where I found the new Blogger three-column code for Andreas04 template.

Going your own: How to build your own three-column Blogger template

If Stavanger's work hadn't been spot-on for my needs, I would have been faced with the real possibility of having to hand-code my own three-column Blogger template out of the closest two-column Blogger default template I could find. If you decide to go that route anyway, there are some helpful tutorials on the web to walk you through this.

BeautifulBeta: Adding a second sidebar to your Blog - part 2 - This is actually a "standalone" post to walk you through manually adding a second sidebar to an existing Blogger template. It is very clear and the comments section has a great deal of additional discussion on the subject.

Blog U: Fluid 3 Column Blogger Template - Here is another great post that discusses how to change a "fixed" 3-column layout to a "fluid" one that changes according to each viewer's screen size settings. It gets into some of the mechanics on how to pull it off and does a great job showing how all the element items work together. A good supplemental read on the subject is George Mikos's post documenting his Blogger template in great detail.

Blogger Tips, Tricks, and Hacks

OK, so you decided on a new template. You plucked up the courage to get ready to migrate you "classic" Blogger pages to the "new" Blogger. Just a few more suggestions.

The Real Blogger Status blog - Take a while looking over some of the more recent posts on this page. There is a wealth of useful information you should be familiar with before you begin migration. This is especially true if you have multiple blogs!

Blogger Tips and Tricks blog - Right now the top post is a tip on how to jump the line and begin migration (if you haven't already been offered the chance). Another choice tip: How to get rid of the border in images uploaded via Blogger Dashboard.

Hackosphere blog - Ramani's blog has a number of nice tips and good content and his sidebar has some useful linkage to chase around for more material.

BeautifulBeta blog - Previously mentioned. Dig around on Hans' site. He offers some clever Widget installers and hacks.

Blog U - The posts are great, and for added resources explore the sidebar offerings for cross links regarding Blog Tweaking, CSS/HTML, and Blog Templates. Good stuff awaits those who look.

Final Thoughts

Once you get your template converted, the new GUI'ish "page elements" can be easily used as you transition from your old "classic" Blogger code to the new code format. Some good tips: Use the Picture element to add a picture. If you place it in a sidebar, be sure to select the option to "size to fit". The List element is great for making simple static lists of items--likewise use the Link List element to quickly add and organize important links. Want to just add some static text--maybe for a custom bio element? Use the Text element. Use the Labels element to display the newly added feature of labels. In the new Blogger, you can add labels (aka categories or tags) to each post. Then the Label element will list them for easy access! It was about time for that one.

But the kitchen-sink element that will greatly aid your transition must be the "HTML/JavaScript" element. With this element you can add standard HTML script to your new Blog. It allows you to do the editing in HTML or Rich Text format views. It saved me a bunch of time getting my sidebar items worked out (for now). As time goes on and I get more proficient in the new Widgets I'll gradually convert them over. This one alone is great to use.

If you are very sharp, you might also notice that Blogger is now using Picasa Web Albums as their image host--if you are uploading images to your blog from the post editor.

And if you use Google's Analytics...don't fall into the trap of adding your JavaScript code in there. You want to place it in the body of your blog...near the bottom, right before the </body> tag.

Hopefully with a bit of research and a good measure of patience you can make a smooth transition to the new Blogger system.

It really can be your friend.

--Claus