Blogger is not as easy to customize as WordPress, but Blogger's simplicity also makes the process of setting up a blog a lot less daunting. You can literally start blogging within minutes of signing up for a Blogger account. Google will also host your blog for free, which means you don't need to pay for domain registration or web hosting. WordPress does also offer free hosting, but WordPress doesn't allow free account holders to include advertising. Blogger does. So if you have dreams of quitting your day job, but don't want to pay a few bucks a month for web hosting, Blogger provides a good way to test the waters.
But while Google offers a handful of widgets for customizing your blog, if you really want to make your web site your own, you're going to have to get your hands dirty editing your blog template and adding some HTML and JavaScript code. Fortunately, you don't have to know much about HTML or CSS to implement the tweaks in this guide. As long as you're handy with the copy and paste keys, you should be all set. So let's get started.
Before you start editing your template, it's probably a good idea to save a backup.
- Enter Blogger's Layout menu
- Select the "Edit HTML" tab
- Click the button that says "Download Full Template"
- Save this XML file somewhere you won't lose it. You can use it to restore your old template if things go horribly wrong.
One thing that sets Blogger apart from many other blogging services is the toolbar that is displayed at the top of most blogs hosted on Blogger. Some uses like this toolbar as it includes a site search feature and it lets users find random blogs in StumbleUpon-like fashion by clicking the "Next Blog" button. But it also takes up valuable screen real estate and leaves that nasty taste in your mouth that comes with knowing you don't have complete control over your own blog. So here's a tip from Digital Inspiration that will let you remove it:
- Navigate to the Edit HTML tab in the Layout menu.
- Enter the following text pretty much anywhere in your template (as long as it's in between other elements) and then click "Save Template":
height:0px;
visibility:hidden;
display:none;
}
Next time you load your blog, the Navbar should be gone.
Change your label list into a tag cloud
Blogger lets you add labels (the rest of the world calls these tags) to your posts. And you can display a list of labels in your blog sidebar. But if you like to tag liberally, after a few months of blogging, there's a good chance your list of labels will be about a mile long. One solution is to replace your label list with a label cloud.
This hack from phydeaux3 will display a list of frequently used labels on your site. If the list is too long, you can choose only to display labels that are used more than once, twice, or whatever other number floats your boat. Labels that are used more frequently will be displayed with a larger font, while less frequently used labels will take up less space. And of course, any time a visitor clicks on a label, they'll be taken to a page filled with relevant articles.
Add a contact box and About Me page
While Blogger includes an "About Me" module, when visitors click on it they're taken to your Blogger.com profile page. Wouldn't you rather have more control over your About Me page? Here's a little trick: Just write a blog post describing yourself and set the publication date to yesterday, or better yet, a few years ago. That way it will be buried by newer posts and won't wind up on your front page.Now you can just add a new HTML box to your sidebar with a link to your new About Me Page. You can create a text-based link by modifying this link: <a href="http://myblog.blogspot.com/2007/01/about-me.html">about me</a>.
Using the same method, you can add a contact box using a service like Contactify. Contactify presents you with some HTML that you can paste into a blog post to bring up a contact box. Visitors can send you an email message without every seeing your actual email address, which helps cut down on junk mail.
Place ads and other content between postsGoogle makes it extraordinarily easy to place Google AdSense advertisements in between posts. Just go to the Layout menu and click the "Edit" button in the "Blog Posts" box and check the "Show Ads Between Posts" box. But what if you want to show ads from another network or some other content in between posts on yourou main page?
In order to do that, you need to go back into your template and check the "Expand Widget Templates" box. Now find the line that reads "<p class='post-footer-line post-footer-line-2'/>" If you add the HTML code for your ad or other content here, it should pop up in between each post on the main page.
If you get an error message, it's possible that Blogger doesn't like the HTML code, but you can probably solve this problem by parsing your code and translating it into a format Blogger will recognize. Fortunately, there's no need to do this by hand. You can use the Parse HTML tool provided by BlogCrowds. Just copy and paste the code you get from your advertising network into the tool and it will spit out a version of the code that should fit comfortably into your Blogger template.
Blogger in Draft: Try out Blogger's beta features
If you're looking for a few items that will spice up your blog but you don't want to fiddle around with HTML, here's a neat little trick. Instead of logging into the Blogger dashboard at www.blogger.com, try draft.blogger.com. When you go to add new page elements, you'll notice you probably have a few more options than you saw in the main Blogger dashboard.Blogger in Draft is where Google lets users test out widgets and tools that might not be ready for widespread use. After a while, many of these widgets will probably be available in the main dashboard. But some of the most useful widgets and tools made their first appearance in Blogger in Draft.
Right now, Blogger in Draft users can add Google Gadgets, a Blog List, or a new improved search box to their blogs. There's also a tool that lets readers choose the feed reader they want to use to subscribe to your blog's feed.
Choose a new templateYou can use the tools above to change the look and feel of the sidebars. And you can use Blogger's Fonts and Colors editor to change the basic look and feel of your chosen template. But if you're not happy with the templates Google provides, there are hundreds if not thousands of other templates available for free. These third party templates are often more attractive than the default templates, and help keep your readers from
realizing they're visiting a Google hosted blog. Oh, and Google doesn't offer three column templates.If you know what you're doing, it's not hard to modify these templates to do things like move the sidebar from the right side of the page to the left, or change the images atop the page. Here are a few sites where you can find some excellent templates:
- Blogger Buster
- FinalSense
- Blogger Templates
- Blogspot Templates
- Gecko & Fly
- Mashable: 50 Beautiful Blogger Templates
Register a domain name
Now you know how to make your blog pretty, but there's one more ugly spot you might want to address. The URL bar. Myblog.blogspot.com just never seems quite as professional as myblog.com. Fortunately, you can register a domain name for just a few bucks per year, and Google will continue to handle all of your hosting fees.
Google makes it easy to publish your blog to a custom domain name. Just click the "Settings" tab in the Blogger Dashboard, and then click on "Publishing." Next, click the link that says "Custom Domain," and you can either purchase a domain from GoDaddy or enter the name of a domain you have already registered.
Now you can publish your blog to a custom domain for $10 per year or less. Next time your friends start telling you how much cooler WordPress is, throw that in their face.
For further reading, you might want to check out some of our previous Blogger coverage:
- Blogger in Draft gets new search box and blog list features
- Add a recent comments widget
- Google adds post scheduling to Blogger
- Blogger adds comment email notification
- Blogger Play: View recently uploaded Blogger images
Post
