Build & Customize Your Blogger Site Using Template Designer!

Since Blogger has come out with "Blogger in Draft" and their new Blogger Template Designer, I figured it was way past the time when I should update my old "how to build a blog" articles with a new one, focused on the template designer and how to use it. If you haven't yet tried the new blogger template designer and wonder how it works, this post if you.

When you login to your blogger dashboard, you'll see a list of all your blogs under your login.

To get started, I'll use a blog I began only as a sample to give new bloggers a start on setting up a blog. It uses an old template, and today we'll convert it from the old style blogger template to one of the new ones that you can "redesign" in the blogger Template Designer. Oh don't worry - it's really not difficult.

First thing to do is select the blog you want to convert and click the "Design" link for that blog from your dashboard. (If you don't see "Design" in your list, then look for "layout" and click that instead).

When your page loads you'll see your page layouts for your current template. Look at the top and you'll see the link for the template designer. When you click that link you'll get the template designer page, which shows your current blog design in the bottom frame, and the template designer in the top.

If you try to make any changes to an old template, you'll get a notice in the template designer that the changes aren't applicable for this template. Before desiging your own blog layouts in the template designer you need to select one of the new templates.

The old templates no longer have the ability to be changed using blogger - the section where you could change the colours and text style of the background, header text and so on no longer exist for these old templates. If you love your old template, then you can still continue to use it - but you can no longer edit it in blogger, except by using the "Edit HTML" function. If you aren't very good with that, you can download the template from blogger (from the edit html page select "download full template") and save it. You should be able to edit it manually if you know how, or use a software like alley code or nvu to edit the codes.

Okay, lets go back to the template designer. We're going to select one of the new templates so we can make it our own.

When you click one of the template designs in the "Templates" tab it will load the template as a preview, showing you what your blog would look like with the basic template design you clicked on. One thing I've run into only recently is when I want to preview a different design, I sometimes have to click the "live on blog" button before it will reload the blog with the new design. If you click through the templates and find they aren't showing the preview in the bottom frame, click "live on blog", then reselect the template you want to preview.

For now, we're going to stick with the template "Simple" by Josh Peterson. Both Simple and Asesome Inc. by Tina Chen are easy to edit and customize, and I personally tend to use one or the other when editing a blog design. You can select anyone you find suitable. And, of course, there is no reason to edit the design or colours if you LIKE the pre-set template that you select. You can simply leave it as it is and continue blogging with a new design.

If you want to edit the template for your blog, read on. Once you've selected a template, the next step is to edit the background. Click on the background tab in the template designer. Here you'll be presented with a set of colour co-ordinated theme colour choices. If you like any of them, you can select one of those.

 But you aren't limited to these, and can make individual choics in the Advanced tab. Also in this background tab you'll see an area titled "Background Image". Click the little arrow and you'll be presented with some choices for your background image. You can look through all the categories, click on images and see them on the background of your blog.

I generally select the option "no background" because I prefer simplicity on the backgrounds and prefer to let my blog contents be the focus of my pages, but for this sample blog, I'm going to upload one of my own free abstract background textures. To upload your own photo, click the "upload image" button. Images should be a minimum of 1800 X 1600, and can be larger. Click the browse button and find the image on your computer. Select it and wait for blogger to load your image.

If you're happy with your upload (or any image you find in the list) click "done". Once your back in the template designer, you can change the alignment of your image, or select tile or don't tile, or have the image stationery, or scroll with the page.

Because the images are often not as long as a full page, when you select the tiling method you'll see the demarcation line between the bottom of the image and the top were it begins again. The same will happen horizontally if your images aren't large enough. If you can upload a "seamless tile" image for your background, you'll avoid this.

For now, I'll leave my background image this way so we can move on with the design.

The next step is to decide on the layout you want for your main post, widgets and footer. Click the layout tab and you'll see three options to the right - "Body Layout", "Footer Layout" and "Adjust Width". We'll start with Body Layout.

  Looking at the sample layouts you'll note the one that currently on the blog (that one came with the Simple template we selected), and options for changing to a "no sidebar" layout to different layouts for multiple sidebars. On the whole, I prefer a simple layout with one main panel for posting and a right or left sidebar. For this blog, I'll select the fifth option with a center pane for posts and a single sidebar on either side.

When you select one of the layouts, you'll notice that this will show in your blog preview pane with your widgets set into the various spots. You can arrange these widgets when you are back in the blogger design page.

Now, select your footer choices. Click the footer layout tab and choose one of the footer options (single, double or triple footer where you can place gadgets like text or images or whatever else you can get with a gadget).

Next, select the "Adjust width" option. Here you can select the width of your post template area, and the width of the sidebars.Play with those adjustments until you like the layout. Now we're ready to move on to the Advanced Tab.

When you select Advanced you'll see a list of options where you can make changes to your blog design, like the page text, and backgrounds of various sections, you can create "tabs" for your "pages", adjust the text and text colours. Ready?

Okay first section is the page text, but I have a tendency to start with "Backgrounds" because once I've selected background colours for areas, then it's easier to decide what colour text works best. So let's ignore the Page Text for the moment and click on backgrounds. You have three choices - outer background (this is where we uploaded our image, so if you have an image, you'll want to leave that alone). If you didn't set a background image, you select a solid colour background here - white, blue, black - pretty much any colour your heart desires. Only select this if you don't have a background image, or if you have chosen a transparent background image, or if you selected a colour these set and want to change it.

 The main background in this template is set to white, but I've decided to set this to transparent. Not so much because I like it, but I want to show you how to get a transparent background if that's what you want. This works best for fairly plain backgrounds and very simple background images - not so good with the background I've chosen. To get it, select "Main Background" and in the little coloured box next to the current colour choice (white/fffff) select the small arrow and you have the ability to decide on exactly the colour you want with the colour editor, or you can select transparent from the bottom of the colour editor.

Now that I've decided on the background colour (or no colour), I'll go back up to the Page Text and set that. You can choose your font (this is for the main text of the blog), the size, whether it's all bold or all italics, and you can also select the colour. Find something you like and set it. Move on to the Links tab and set your link colours for the link, the visited link and the colour you when you hover over a link.

By now you should be growing familiar with these settings. Along with the ability to choose your exact colour, you can also choose from the list of suggested colours below each option. So go ahead and set your blog title text and colours.

Now we move on to the Tabs Text. The "tabs" are part of the "pages" function on blogger. These tabs appear as a menu, either under your header, or in your sidebar. Depending on the colours you choose, this menu can resemble a simple menu from a website. Select your font and font size, and select the text and text colour. Then move down to the Tabs Background. Here you can decide what colour the menu "buttons" are, and what colour they are when you hover over them.

You may have noticed as we click through the advanced options that there are dotted lines around some sections. These dotted lines outline the area you are selecting options and colours for. Click on the "Post Title" tab and you'll see that the outline only goes around the posting section - because what we are setting options for here is the post title - the font and the font size. Complete the choices for your Post title and post footer sections and then click on the Gadgets tab.

You'll notice all the gadgets these options include will be surrounded with the dotted lines. You can select the title colour for the gadgets.

Almost finished with the layouts - for images, unless you really want some sort of colour in the background and as a border, you can select transparent as the background and border colours, the same way as we chose a transparent background above. Otherwise, set the background and border colours to your taste, as well as the colour used for the image captions.

The last thing we'll do is set the accent colors - the accents are those thin narrow lines that separate your sidebar areas from your post area. You can set these to one of the colours in your blog, or you can make them transparent if you prefer a clean look.

And, unless you are comfortable with CSS changes, for the moment we'll leave the very last section alone. That's where you can your own CSS styles to make your style changes to the CSS.

At this point, you are basically done with your design. You can go back and change anything you like before you apply this design to your blog.

If you're ready, click "apply to blog" in upper right corner of the template designer. In a few seconds you'll see a short notice at the top of the page that your changes have been applied to your blog. Now click "back to blogger" at the upper right.

Anyone who has used an image in their header will probably need to replace the header image because most often the size will be a little different. You upload your new header image the same way you did with the old templates - click the edit link on the header gadget to remove the old image and upload your new one.

Now you've converted your blog to the "blogger in draft" Template Designer templates, but it sure doesn't look like the "Simple Template" we began with - it's entirely your own!

Here's the old blog converted using the Blogger Template Designer (you can visit the page to see it action here on blogger):

Any questions? Post a comment with your question and I'll do my best to answer it.

Editing the HTML in the Blogger Template

NOTE: For information on editing and creating your blog using the Blogger in Draft, and the new Template Designer, please see this OTHER (newer) post!

Here we are, on the last step of the basic editing process for your blogger. This option can be found in your Layout section under "Edit HTML", and it looks like this when you get to the page:

The first thing you want to do is backup your template, so click the "Download Full Template" link and save it. If you are using a basic blogger template and haven't made any customized changes to the HTML then you probably don't need to do this, but it's a good habit to get into.

You will also want to backup your blog itself, so go to the Settings Tab and Select Basic. Right at the top is an option to export or import a blog. Select the Export option and save the blog on your hard drive. If anything goes wrong when you edit the html of your template you now have the data in your blog (the blog backup) and the original data from your template (the template backup) so you can restore your blog.

Editing the HTML is really not such a good idea if you don't have any experience at all with coding or html - blog templates contain CSS codes too, and if you aren't familiar with this, making a change in one place of the CSS can horribly affect something else, or can have no affect at all, because something needs changed elsewhere within the template.

Since the instructions I am giving are for total newbies (ie: people with no blogging or website editing experience) covering this sort of html change would take much more than a few simple instructions.

What I will show you is how to add things like the verification code for webmaster tools, or google analytics, or third party statcounters.

It's usually fairly simple since they actually give you the code and instruct you where to place it. The verification code goes in the head section of the template (see the blue text below), and you can also edit your blog description in the meta content (see the orange text), as well as adding additional keywords (see the red text). These are very simple edits, and as long as you keep your additions between the brackets and the quote marks, you should be fine. Note that you can add codes to the html/javascript widgets also and some codes require that they be added at the end of the body section, so be sure to read the instructions for whatever code you are planning to use.

Be careful when adding extra keywords. Keywords should only relate to your blog's content and subject matter. Trying to put keywords here that you think are "highly paying" but have nothing to do with your blog will actually lose you results in the search engine. Keep your keywords to a reasonable number - between 7 and 15 is usually good. Too many and your site could be considered spam, or could be penalized in searches because of keyword stuffing. Sometimes more is not better. The same can be said of the description field - don't make this too long, and make sure it describes your blog and it's contents.


The last thing you'll notice in the code above is one I added for a favicon - that's the little picture that displays beside the url of your blog in your browser's search bar - for standard blogger blogs, it's usually Blogger's white "B" in the orange square, but you can have your own if you want.

The first thing you need to is create the icon file. If you don't do image or graphic stuff at all, you could just do a web search for free icons, and find one you like that matches your blog, but they aren't hard to create. Many free image software programs can create an icon file from a picture. You will need to crop and resize your image file to 32 X 32 pixels, so make sure whatever you choose can actually be seen and recognized at that size. Then you need to save the file with a .ico extension, so make sure your editing software can do that.

You need to upload that file somewhere that you can link to it - photobucket, imagecave, your own web server, or even a picasa album.

Insert the code for the icon file into the html of your template (see the green code). Where the example shows this url reference:

http : //photographyofgrace.com/ favicon2.ico

You need to remove that (unless of course you plan to use my favico) and replace it with the url to your own favicon file. The balance of the code remains the same.

If you look around the internet, you'll find other easy tweaks you add into the head section of your template's html - things that can help with SEO for instance.

If you really want to edit the design portion of your template, the wisest thing to do is download the template and play around with it in an editor (try NVu or AlleyCode - they're both free). Once you have something you like, you can upload it (after backing up everything) using the "Upload a template from a file on your hard drive" option on the Edit Html page.

That's also how you upload any free template you might find on the web.

That pretty much concludes the basic editing for blogs, and getting started with Blogger.


Remember the blog we first started off with? Well, it's had some changes over the course of this little series, and now it's finished and ready for someone to blog their heart out (have a look):

Building a Blog With Blogger

Editing Your Blogger Design & Layout

NOTE: For information on editing and creating your blog using the Blogger in Draft, and the new Template Designer, please see this OTHER (newer) post!

Carrying on with the instructions for personalizing your blogger design, this post will explain the functions in the Layout tab.

Under the main layout tab you'll find a series of other pages: Page Elements, Fonts and Colours, Edit HTML and Pick New Template.

Page Elements

The page elements tab is where you'll find things like gadgets (other blogging platforms like wordpress call these add-ons "widgets", blogger calls them gadgets). Depending on the Blogger template you are using you will either have a "sidebar" on the left hand or right hand side, or in some cases you may have one both sides, with the post template in the middle. These instructions are for use with templates available directly through the "pick template" function in Blogger. If you've uploaded a custom template, these instructions may work the same.

In the following image you'll notice a couple of errors on the page - it doesn't say "error" but I know it is one. In the right hand column there is no "ad gadget" link at the top of the column, and there should be. If you follow the sidebar column to the bottom, you'll notice that it is cut off, with no access to any of the gadgets beneath the last HTML/Javascript gadget.


I have no idea why this occurs, but it has ocurred in my blogger account for a long time now. The way I get it to correct is to click the "view blog" link in the menu at the top of the page.


This loads the blog into the browser. In the navbar there is an option to customize your blog. If you click that, it takes you back to the layout page, but shows the correct editing functions now. This may not be necessary for everyone - many blogs seem to work properly, but if you find yours giving the same errors, try the fix I've posted.


To add different things to your sidebars, or above or below the main posting template you click the "add gadget" link for the area where you want to add that item. There are numerous gadgets available - a text box for just adding text, a link gadget for adding lists of links (in the sidebar of this blog you are reading, the menu was created using a links gadget), a picture gadget for adding pictures, an HTML/Javascript for adding things like codes (and javascripts, like adsense or others), there's even an adsense gadget.


When you click the add gadget link, a box opens with a bunch of gadgets in a list that you can scroll through and select the gadget you want to add. When you select a gadget to add, if it has parameters for you to set (like links to add, or a picture to add, colors, etc.) the gadget opens to allow you to make these entries, and when you click save, the new gadget appears in your sidebar.

Adding gadgets to your footer, below your header or at the end of the posts template works in the same way.

To make changes to your header, like replacing it with a picture or changing the title that displays, select the edit button on the header (right below the navbar). If your template allows images to display instead of (or behind) the text for your header the option will be here to upload an image, and to decide if you want it to be instead of the title, or behind the title. If you have a header image that you've already added text to, then you would want choose "instead of", but if you just have a picture and still want to see the title of your blog, then you would select "behind".

You can make changes to the colour of your navbar so that it more closely matches the colours selected for your blog, or so that it contrasts. Click the edit button on the navbar and select the choice you want for your navbar color.


Fonts and Colors

To go beyond just adding gadgets, you can set the fonts and colours in your blog by choosing the fonts and colours tab. The opens an editing box above your blog. On the left you'll see a list of the items you can change the colours for in your blog. Different template choices allow different options - some allow changing the background colours, while some don't. As you make the colour changes the results will display in your blog below. Once you are satisfied, click save.


Edit HTML

This one I'll leave til the next post.

Pick New Template

This option allows you to browse and select the standard blogger templates to preview how your blog would look before opting to change it. When you click the Pick New Template link, the templates page opens. To preview a different template, click the radio button in the one you want to see and then select the preview link below it. It will show you how your blog will look using that template.