Monday, October 31, 2011

8 steps to a more professional Blogspot blog

Blogger Layout
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.

Backup your template
Back up your work

Before you start editing your template, it's probably a good idea to save a backup.
  1. Enter Blogger's Layout menu
  2. Select the "Edit HTML" tab
  3. Click the button that says "Download Full Template"
  4. 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.

Navbar
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:
  1. Navigate to the Edit HTML tab in the Layout menu.
  2. 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;
}

Next time you load your blog, the Navbar should be gone.

Change your label list into a tag cloudlabel 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
ContactifyWhile 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.

ads 
between postsPlace 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 "
Related Posts Plugin for WordPress, Blogger...