This is a popular question and desired item to have as part of your sidebar!  However, you do need a Constant Contact account, which is separate from paying for Typepad and WordPress (Blogger is free). Click here to sign up for Constant Contact!

Below you will find instructions on how to add the Signup Box to Blogger and Typepad.  I did attempt this in WordPress however the form did not appear properly and may not for free WordPress acounts. So, please not that the WordPress instructions below will NOT work properrly with FREE WordPress accounts due to HTML security restrictions.

Constant Contact

1. Login to Constant Contact.
2. For the majority of users, the main screen looks something like the one below, on the right side of your blog, there is blue text (a link) that says "Grow my contact list.".  Click that link.

   

3. Then, from the next screen is NEW and looks like this screenshot below. Amongst all the options you have here (such as customizing your registration form, welcome email and more). Click on the Create a Link highlighted in the picture.

   

4. On this next screen, choose the style of your signup box. You can choose text links as well, but be careful about choosing the BUBBLE style – it only looks good on "white" sidebars!  So, in this example, we'll be choosing STYLISH.

   

5. Click Next.
6. On the next screen, below, you can customize the colors of your Signup Box. Color = the color of the text. Background = the color of your sidebar! The default is #FFFFFF which is white. Choose a style for the envelope icon.  You can also click to include the privacy statements (small) as well to let your visitors know it is "safe" to sign up for your newsletter. You can also modify the text – for example changing it from "Sign up for our email newsletter" to "Sign up for my newsleter".

   

7. Click Next.
8. The HTML code is generated where you can select ALL of it.  Do a COPY (CTRL + C on a Windows keyboard).
9. Now you will go to your blogging platform and follow the instructions below to add the box to your blog's sidebar.

Blogger

• Login to Blogger.
• From the Dashboard, click on Layout.
• From the Page Elements screen, click on Add a Gadget.
• From the list, HTML/JavaScript icon.
• In the Title, type a desired title such as My Newsletter or Keep Updated.
• In the large text box area, PASTE the HTML code you copied from Constant Contact (CTRL + V on a Windows keyboard).
• Save Changes.
• It now appears as the first item on the sidebar. Drag and drop where you want to place it.
• Save changes.
• You're done!
• You can now sign out of Constant Contact as well.

Typepad

• Login to Typepad.
• Go to Typelists.
• Click to Create a New Typelist.
• Click a NOTES type and give it a title such as My Newsletter.
• Click the Create New Typelist button.
• On the next screen, you can leave the label blank if you'd like.
• The important thing is to PASTE (CTRL + V) the code from Constant Contact into the large Notes text box area.
• Click Save Changes.
• Since it is a new Typelist, you have to click the Publish tab.
• Then click the check box next to your weblog name.
• Click Save Changes.
• Then click on the blue link CONTENT. This brings you to the blog's layout.  Notice your new item is at the bottom of one of your sidebars. Click on it and drag and drop it where you would like it located.
• Save Changes.
• You're done.
• You can now logout of Constant Contact as well.

WordPress

Again, please note that this will NOT work or appear properly in FREE WordPress account/blogs due to HTML security restrictions.

• Login to WordPress.
• Go to the Dashboard.
• From the left column, click on Appearance, then Widgets. Or get to the Widgets area however you know how to – I'm still fairly new to WordPress (LOL).
• Click to ADD a TEXT Widget.
• It is then added to the right with the label TEXT.
• Click Edit.You may have to click Save Changes first to save the widget, then go back to Edit.
• Then you will see 2 boxes appear. A small one for the title, such as My Newsletter. And a larger one where you can PASTE (CTRL + V) all the code you copied from Constant Contact.
• Click Done.
• Click Save Changes.
• You're done. You can can now log out of Constant Contact as well.

Hope this helps!