Back in 2010 Blogger launched a template designer that promised to make changing one’s overall blog design effortless and pain-free. I, however, was a little skeptical and a bit terrified that using the template would cause a loss of data.
Boy were my worries unfounded! Today I am going to show you how I spruced up my own blogger blog. . .
Step 1. Back up your blog posts
You can use bloggerbackup.codeplex.com to back up your posts effortlessly.
Step 2. Log into your Blogger account
Once you’ve logged into your account, locate your blog on the dashboard, and click the “Design” link. (You can also get to the Template Designer by clicking on the “Layout” tab.)
Step 3. Select Template Designer
Click on the “Template Designer” link on the top left corner of the design page. This will take you to the new Template Designer tool.
Step 4. Experiment with the Template Designer
Once you click on the template designer link, you should see a design screen that looks like this:
The top half off the screen shows the designer tools. The second half of the screen shows your current blog design. Once you begin making changes to your blog’s design, the changes will appear on the second half of the screen.
These changes will not be made permanent until you click the “Apply to Blog” button, so go ahead and have a little fun.
Step 5. Select a template
Click on a template you like. When you click on an overall design, you will be given several color schemed below the design box to choose from.
In this case, I’ve chosen the “Simple Template” with the blue layout.
Here’s how my blog looks after applying the changes to my blog.
Notice that I’ve lost my banner? That’s okay, we can easily add it back later. (Just make sure you have a backup copy of your banner saved on your computer, or know where you saved the banner in the first place.)
Step 6. Select a background
To change the background of your blog, click on the “Background” link on the left side of your screen. From there you can choose a basic color scheme.
In my case, I stuck with the blues.
Once you select your color scheme you can change the background to include your own background image, or choose from a number of background images already provided.
To add a background image, clink on the single background box. When you do, a new window to pop up showing you a selection of backgrounds to choose from or a button to upload your own image.
To select one of the existing background images, simply click on one of the images provided. To upload your own image, click on the “Upload Image” button in the upper left corner.
When you click on the “Upload Image” button, a new screen will appear asking you to select an image from your computer files.
Once you upload your image, the image will appear inside the single background box with a new set of choices: position, tile, and scroll with page. Make your choices.
This is how my blog looked after I tiled my image:
Step 7. Select Layout
Once you’ve made changes to your background and color scheme, it’s time to choose a blog layout. To choose a layout, simply click on the “layout” link in the left column, then choose one of the layouts that best fits your blog.
This is how my blog looked after I chose the three-column template.
Step 8. Adjust widths
After you’ve selected your layout, you may find that some of your content no longer fits appropriately on your blog. Don’t fret. All you have to do is adjust the widths of your columns by selecting the “adjust widths” link in the left column.
Step 9. Use Advanced Options
Now that the basic design has been put into place, it’s time to tweak your blog and make it more personal. To do that, click on the “Advanced” link in the left column, then scroll through the list of options to change the font colors of your text, links, header, and footer.
Step 10. Remove the Blogger navigation bar
I don’t know about you, but I don’t like having Blogger’s navigation bar take center stage when art collectors or the press stop by my blog. I think it looks unprofessional.
To remove that pesky little navigation bar, click on the “Add CSS” button in your list of “Advanced” options then type “#navbar-iframe {display: none !important;}” without the quotes into the customization box.
This is how my blog looked after I removed the navigation bar:
Step 11. Save your changes
Once you are satisfied with your changes, click on the orange “Apply to Blog” button in the top right corner of your screen.
Step 12. Put banner back
To replace the text with your banner, click on the “Back to Blogger” link next to the “Apply to Blog” button.
When you click on the “Back to Blogger” link, you’ll be taken to the “Add and Arrange Page Elements” section. On this page, you want to click on the bar with the title of your blog.
When you click on the blog title bar, a new window will pop up asking you to configure your header.
Here you can upload a banner image from your computer. Once the image has been uploaded, you’ll receive confirmation that it was successful by seeing the image appear in the configuration box. If the image does not appear in the configuration box, try again.
After the image has successfully loaded, choose whether you want the image to appear behind, above, or in place of your title and description. Then click “save”.
Step 13. Adjust columns
The final step will be to adjust the columns in your new template. To do that, all you have to do is put your pointer over the box you want moved, then right click on your mouse and as you hold down the clicker, drag the box where you want it to go.
Once you are satisfied with all of your changes, click the orange “Save” button in the upper right corner of the page.
And there you have it!
Although I’ve shown you a lot of steps, it truly is as simple as pointing and clicking. And the best part is that with a little trial and error you can find the perfect blog design to match that custom-designed website you paid for!
This post may contain affiliate links.