How to add a shoutbox

Not exactly a hack but it’s useful for those first time bloggers who would like to add a bit of visitor interactivity to their blogs. Adding a shoutbox is still considered very mysterious to most people because it involves editing HTML. So to clear that up, today I’m going to show you how to add a shoutbox in Blogger. This post is especially dedicated to Fay. May your shoutbox be up soon ;)

So first thing you need to do is to have a blog with Blogger. This should work with any other blog hosting site but this article is Blogger specific. So you’re on your own if you don’t use Blogger. Now login to your account and you should see your list of blogs with Blogger.

Then click on the “settings” of the blog that you want to add the shoutbox to.

Next, click on the “Template” tab. This will take you to your template for editing.

Then click on the “Add Page Element” link.

We want to add some HTML to the page, so click that.

You should see this after you’ve done the last step. Leave this window for now. Minimize it or move it away.

So far so good? Now you need to register a shoutbox. I recommend using’s shoutbox since it’s relatively easy to register one. Get a new browser window and navigate to You should see something resembling the screen below (unless they changed the page or something).

Click on the “Join now!” link. This will lead you to a page to sign up for a new shoutbox.

Fill in your personal details. Email address must be valid for you to recover your password. After you’re done, click on the “conclude the registration” link.

On this page you can set your password (remember this!) and set your blog/site details. After you’re done, click on the “conclude the registration” link.

This page won’t make much sense unless you know German. Skip and click on the “Anmeldung abschliessen” link.

And you’re done. Now just login to your account using your password. We need to get the codes to paste in your blogger template.

Upon entering the correct password, you’ll be taken to this page. On this page, you can set your shoutbox’s settings like color scheme, shout format and many more. But we’ll need the codes first. Click on the “code generator” link.

Use the default settings and click on the “generate code” link.

(Click for a larger picture)
After clicking on the “generate code” link, you’ll be taken to the page on the left. Bring up the blogger window that you minimized/put out of the way just now. Paste the generated code to the content part. Give a suitable title too, like “Shoutbox” or “SHOUT SHOUT SHOUT!!” or anything that you want. After that is done, click on the “Save changes” button. The window will disappear and you will see the following:

Notice the “page element added” message? If you look at your layout, you should see your shoutbox there. Move it around until you’re happy with it. Don’t forget to save the changes. Then you can view your blog to check your new shoutbox:

And you’re done! Wasn’t that easy? Now you can add as many shoutboxes as you want (though I don’t see why anyone would want to do that)! Or you can teach your friends or tell them about this guide!

That concludes our lesson for today. Hope you all get your shoutboxes running soon. If you found this article useful and you’ve managed to get your shoutbox up, do drop a shout on my box on the left. Leave your blog address too ;)

Happy shouting! Continue reading