Featured TypePad: Sea of Shoes
The Happiness Project

Weekend Project: Draw Attention to the Comments Link

We know commenting is an incredibly important part of blogging. The interaction between blogger and reader is pivotal in reaching a larger audience--they share with their friends, who share with their friends, and so on. We want to share with you some of our favorite tips for making the "Comments" link in your post footer more prominent to help build a community within your blog between you and your readers.

(note: the following tips require Custom CSS, a feature of the Pro Unlimited plan, and can be found at Design > Custom CSS)

image from content.screencast.com
Up above we have a generic and unassuming post footer. It belongs to a blog post, just begging to be commented on. As you can see, there aren't any comments yet, but we can definitely improve those odds using some of the tips we're going to share with you.

Let's spruce up the "Comments" link to make it more noticeable, okay?

Tip #1: Make it bold!

Bold text can capture your attention. It says, "hey, I'm special!" And your comment link is definitely special, so let's make it bold!

In your Custom CSS, add the following line:

.entry-comments {
        font-weight: bold !important;
}

Preview and save your changes to see something a bit like:

image from content.screencast.com 
Tip #2: Make it loud!

Netiquette states that using ALL CAPS LIKE THIS is a form of shouting and shouldn't be used, lest you want to be considered rude. Since we can't give your comment link an obnoxious flag to wave, or tell it to bounce around, we can certainly let it be heard via uppercase letters.

To do that, try the following CSS:

.entry-comments {
        text-transform: uppercase !important;
}

Preview and save your changes to see something a bit like:

image from content.screencast.com 
Tip #3: Pump up the volume!

Why not go for broke and create a custom button or background image to go behind the comment link? We'll cover two different methods--use a background image with the existing text link or use a custom button--for pumping up the volume of the comment link.

Option One is to add a custom button image, like the following icon... Comment-button

To do this, we'll need to use CSS a bit more complicated when compared to the earlier tips. Get up and walk around for a couple of minutes, stretch, pet your cat, dog, gerbil, or fish. Ready? Good, let's do this.

First, create an image you like that fits your theme or custom design. Make sure it's not so large that it takes up the same space as your post, but not so small that it will get overlooked. Anything between 15px and 30px square should do the trick, like the image we have above.

Next, upload that image to your File Manager at Library > File Manager. Once uploaded, click on the filename and copy the URL of the image from the address bar of your browser. Hurrah! We still have more than half the fun left to go...

Go to Design > Custom CSS, and enter:

.entry-comments {
        background: url(http://everything.typepad.com/files/comment-button.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px 0px !important;
        display: inline-block !important;
        padding: 2px !important;
}

Preview your changes.

image from content.screencast.com
That's not exactly what we had in mind, is it? No worries, let's fix it up! We just need to tell the text to disappear, but the link to remain. To do that, we'll make a small tweak and add some new commands to the existing CSS:

.entry-comments {
        background: url (http://everything.typepad.com/files/comment-button.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px -3px !important;
        display: inline-block !important;
        width: 30px !important;
        height: 21px !important;
        text-indent: -1000em;
}

Preview your changes.

image from content.screencast.com
Wow! That's looking pretty sharp, isn't it? What if we want to keep the "Comments" text and have it appear as though it's part of a button? We can do that! In fact, why not just make it look like the pretty sweet buttons that TypePad already offers for Favorite, Reblog, Tweet This, and more?

Option Two will do exactly that, and this is the image we'll start with... Comment-link

Looks like too much, right? It's not, we promise. You'll need that extra space in the button in the event that every single person to use the internet drops in to read your blog and leaves you a comment.

Here's the CSS we'll need to achieve the awesomeness that will soon be gracing your blog post footer:

.entry-comments {
        background: url(http://everything.typepad.com/files/comment-link.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px 0px !important;
        display: inline-block;
        border: 1px solid #ddd;
        padding: 2px 6px 2px 28px;
        color: #666 !important;
        font-size: 9px !important;
        font-weight: normal;
        font-style: normal;
        font-family: Verdana, sans-serif;
        text-decoration: none;
        text-transform: none;
        vertical-align: bottom;
        background-color: #ededed;
        background-repeat: no-repeat;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
}

It's a lot of CSS, but it's going to make some magic. Just preview your changes.

image from content.screencast.com

Striking! Phenomenal! Look how much more your eye is drawn to that button than it was to its original link state.

We love these tips, and we love our users, so we hope today's tips were fun, educational, and will prove useful to you. Check back each week for more ways to enhance your blog here at TypePad!

comments powered by Disqus