real blogging tips

A friend of mine recently asked me how I created my Mailing List sign up box at the top of my sidebar. He also suggested I write a post about it and I thought it was a great idea….. So here goes.

Gathering an email list is pretty important if you are taking your blog and readers seriously. By creating a nice, clean and easy to recognize way for your readers to sign up you will definitely increase your opt-ins.

Getting your sign up code:

The first thing you need is an autoresponder so that you can capture leads and build your list. I have only ever used Aweber and greatly recommend it. However some people also say that GetResponse is very good too. There are some free options available but as I said, I have never used them.

Once you have your autoresponder you should be able to create a handy little piece of code that includes the web form for capturing the name and email of your visitors. You can see mine below, I have included the graphic that shows my subscriber numbers.

The Code Next you need to put your code inside a box and position it so that you can create a graphic that fits. I find the easiest way to do this is using <div> tags to contain the code and apply styles to certain elements. Now if that sounds like jargon… I’ll try and break it down. First create your bounding box.

<div class="aweberbox">
</div><!--aweberbox ends-->

and then style it by adding some styles to your wordpress “style.css file. This will style the class that you applied to the <div>:

.aweberbox {
width: 250px;
height: 350px;
background: green;
}

This creates the box below:

Next step, we need to insert the another <div> to hold the Aweber code, then we need to insert the Aweber code and use css code again to position it.

<div class="aweberbox">
<div class="aweberform">
<script src="http://forms.aweber.com/form/11/586476211.js" type="text/javascript"></script>
</div><!--aweberform ends-->
</div><!--aweberbox ends-->

and the css to change the font color and position the form…

.aweberform {
color: black;
width: 200px;
margin: 0px auto;
padding: 180px 0;
}

All this and you now have this box below (getting there!):

One last thing to do before we go and create the graphic is to make sure that the background of the outer div will pick up our image. Then we can just create it and put it in. We just need to change one line in the css for the .aweberbox.

 background: green;

becomes,

background:#fff url(images/aweberbox-bg.jpg) no-repeat

Here we have pre determined where the image will go and what it will be called. This means there is just one more simple step… We just have to create an image to fit out box.

The Background Image

All the fiddly code is done now so I just need a nice image.
I defined the size of the box as 250px wide by 350px height. So I just need to create an image that size. To allow me to style to fit the form I took a screen shot of the div that we created and used that as a base.

The image below shows a few steps along the way to creating my final image.

Now I just save the image as the name specified in the css and upload to the ‘images’ folder of my theme.

Voila! Here is the completed sign up box.

Not my best piece of design work, but hopefully good enough to show you what is going on.

I hope you found this tutorial useful.

Any question, suggestions or anything at all please leave a comment or contact me and I will help you get your sign up box just how you need it.

Take care,

Forest.

Related posts:

1. Fix Your Blog For Internet Explorer!
2. How To Setup A Successful Opt-In Email Marketing List
3. Four Crucial Things You Need To Do To Build Your List
4. Guide to making money online with adclickology.com
5. Ping.fm Adds SocialThing to List of Services