So you want to start your own blog. One of the first things you'll have to do is decide which blogging application you want to use. There are a ton of options, ranging from the incredibly simple (LiveJournal), to the infinitely customizable (WordPress). But one of the easiest blogging clients around is Google's Blogger.
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.
Back up your work
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.
While we're talking about backup, now is as good a time as any to mention two services that will let you create regular backups of all the content on your blog. BlogBackupOnline is an online service that will scan your site once a day and save a copy of every blog post and image. Free account holders can save up to 5MB, which should be enough for a few hundred blog posts, while more advanced users can pay for additional storage. If you'd rather download and save your data to your desktop, you might want to check out Blogger Backup, a desktop application for Windows.
Eliminate the navigational toolbar
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":
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
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.
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: about me.
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 posts
Google 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 "
" 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 template
You 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:
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:
