A few users have asked me how I've created the Subscribe box in the sidebar and some have even called for a WordPress plugin that helps automate it. In reality, it's just simple HTML/CSS paired with the Feedburner subscribe code and can be replicated very easily. Let's take a look at the code used to create it:

The HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="widget subscribe">
    <ul class="social">
        <li><a href="http://feeds.feedburner.com/devgrow" class="rss">RSS</a></li>
        <li><a href="http://www.facebook.com/DevGrow" class="facebook">Facebook</a></li>
        <li><a href="http://twitter.com/ThinkDevGrow" class="twitter">Twitter</a></li>
    </ul>
    <h3>Subscribe</h3>
    <p>Join over 2,800 readers and get the latest posts delivered straight to your inbox.</p>
    <form id="feedburner-subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YourAccount]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="text" name="email" value="E-mail Address" class="left textfield" />
        <input type="hidden" value="[YourAccount]" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
        <input type="submit" value="Subscribe" class="right button submit" />
    </form>
</div>

The HTML is pretty straightforward, the only thing out of the norm is the Feedburner e-mail widget, which is taken directly from their site. You can use any service there instead of Feedburner, or use a separate WordPress plugin to handle your subscriptions if you choose.

The CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 .widget {
        margin-bottom: 40px;
        overflow: hidden;
        }
    .widget h3 {
        font-size: 22px;
        margin: 0 0 15px;
        }
    .widget.subscribe h3 {
        font-size: 20px;
        font-weight: 600;
        color: #4a7aa3;
        }
    .subscribe {
        background: #f0f8ff;
        padding: 13px;
        border: 2px solid #d5e7ee;
        }
    .subscribe form {
        margin: 15px 0 0;
        }
    .subscribe input.textfield {
        border: 2px solid #e4e9ef;
        }
    .subscribe input {
        font-size: 13px;
        padding: 4px;
        }
    .subscribe input.submit.button {
        font-size: 13px;
        border: 2px solid #3C6F8F;
        background: #3675A5;
        padding: 3px 5px;
        color: white;
        cursor: pointer;
        font-size: 15px;
        font-weight: 700;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        }
    .subscribe input.submit.button:hover {
        background: #488abc;
        }
    .subscribe p {
        color: #385c7c;
        font-size: 13px;
        line-height: 20px;
        margin: 0 0 5px;
        }
    .social {
        float: right;
        }
    .social li {
        float: left;
        margin: 0 0 0 5px;
        }
    .social li a {
        background: url(icons.gif) no-repeat;
        display: block;
        height: 26px;
        text-indent: -999em;
        width: 26px;
        }
    .social li a.facebook {
        background-position: 0 -30px;
        }
    .social li a.rss {
        background-position: 0 0;
        }
    .social li a.twitter {
        background-position: 0 -59px;
        }
    .social li a:hover {
        position: relative;
        top: -1px;
        }

Please be aware that you need to download the icons.gif file if you want to use the social media links. I've made it into a sprite for faster loading and convenience and if your subscribe box is wider, you can easily fit a lot of other services there as well.

Thoughts? Feedback?

I know this is absurdly simple for a lot of you out there but I've had multiple requests to make the Subscribe box into a separate plugin. Let me know if the above code is good enough or if you guys really do want me to make it into a plugin, and perhaps to make things uber convenient, I may just do so.