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)

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:

 
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:

 
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...

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.

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.

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...

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.

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

[Lydia]

Love, love, love tips like this. Keep 'em coming!

[Trent Fitzgerald]

Ditto! Keep these tips coming!

[Bri]

Thanks, Lydia! These are some of my favorite tips, personally, and I'm so glad we got a chance to share them with you. :)

[Bri]

Thanks, Trent! We'll definitely be sharing more tips in the future, so keep an eye out for our posts. :)

[Account Deleted]

Thanks. I was looking for a way to highlight the opportunity to comment and this works well. Any tips on how to change the format of the Recent Comments module? Again, thanks.

[Account Deleted]

These tips are great - I've been tinkering with CSS for a long while, (sometimes successfully, sometimes not!), trying to achieve some effects but now I can see exactly what I need to do to make certain effects happen.
Thank you. Keep them coming!

[Bri]

Hi Guy!

What kind of format changes are you looking for in the Recent Comments module? The module is limited in terms of configuration (e.g. # of items shown), but if you're looking for CSS format changes, we may be able to come up with a few ideas. :)

[Bri]

Yes! That's exactly what's needed to push your blog to the next level--motivation and the willingness to try something outside of the default. :) We hope our tips are things you can continue to use in the future.

[Michael Zoran]

Why does this "tip" cause every Comment box to end up the way it is supposed to EXCEPT the one that you specifically assign to be at the top of the page?

Could anyone help me out?

Take a look at my blog to see what I'm referring to:

http://www.controversy.typepad.com/

Is there an extra line of code that needs to be there in order for the Comment box to also apply to the Top of the page?

And where do you learn about CSS?

[Michael Zoran]

Brianna,

Actually, what I need is for you to simply answer my question below.

Thanks. :)

[Bri]

Hi Michael,

The Featured blog post does not have all of the same CSS classes assigned to it that the regular posts have. I can definitely see if that's something we can add in the future, however. At this time only standard posts will have the changes applied.

For help with the tips as applied to your blog, I've opened a ticket for you with us in the support system. You should receive a notification of its creation shortly.

To learn more about Custom CSS, please read:
http://help.typepad.com/custom_css.html

[Bri]

And...done! :)

[Michael Zoran]

My comment below appears to have disappeared because you helped me out with it Brianna.

I got your response and the Ticket thing a minute ago. And just 30 seconds ago I see you sent me some enhanced CSS that fixed some "conflicts." ... And 10 seconds ago you said "and done." ... Girl, you are FAST!!! ;)

You might have wanted to leave that comment and question of mine here, though, since others may have been asking the same question.

By the way, Brianna...This is my second month on TypePad but I still have no followers. :(

Any chance you would be my Follower. I'd be honored since you remind me of myself since you posses such fast speed, excellent precision, and appear to be a perfectionist.

[Michael Zoran]

Brianna,

Thank you for restoring my question so others can see your response in case they have the same question.

I just have three really quick questions:

1. How come when I click on the "Home" page link on my blog at www.controversy.typepad.com it always takes me to a page with an error? It never takes me to a real web page the way it is supposed to.

2. The web design I'm currently uses only seems to allow double-spacing between paragraphs. This can be a bit annoying in some spots. Do you know any way to make single-spacing possible? I've tried using other designs, but they have problems since I'm new to this. For example, I liked one design but the screen was too narrow and the text too small. I'm just not familiar enough with CSS and the other designs.

3. Please Follow me...it would mean so much to me to finally get a Follower! Anything multiplied by zero (my current number of Followers) equals zero...But if I can finally multiply something by one, I will be making progress! :)

Thank you for all your help, Brianna! You seem super nice! You like Star Trek: The Next Generation, huh? My kinda gal!!!

Engage!

[jeff reine]

Weekend Project FTW!

[Bonnie]

Thanks for the tips! I tried them all and feel more confident in stylizing my blog every day.
Awesome! Bonnie

[Account Deleted]

I see other sites with more interesting Recent Comments content. The current module basically says Commenter X on Post Y. I'd like the option to change the content and format to list commenters under "Post Y" and format the list like "Commenter X: short excerpt...., Commenter U: short excerpt...", etc. Probably not something CSS alone can do. Just a wish list concept...

[David Ewart]

Cool.
A feature I was going to try and use was the offer of two custom fonts. But the process of modifying CSS was beyond me.
Tips for implementing that would be great.

[Scott Fox, Click Millionaires]

Excellent tip, Brianna.
This new method for highlighting comments is now looking sharp at http://www.scottfox.com/blog_index.html , too.
Thanks.

[Kymberlie R. McGuire]

Looks great, Scott! :-)

[Jen]

Hi Michael! Questions unique to your blog are best handled via a help ticket within your account. Then we'll have all your account information available to answer your questions. I'll briefly address your questions here, but feel free to open a ticket at Help > New Ticket within your TypePad Pro account if need further assistance.

1) At Design > Content, click the yellow pencil icon next to the Navigation Bar to update the links to use your correct domain name. More information:
http://help.typepad.com/navigation_bar.html

2) Key Shift+Enter on your keyboard to add a single line break instead of a paragraph break when composing your posts.

You can also use the Theme Builder - http://help.typepad.com/theme_builder.html - to create a custom theme if one of the pre-made themes does not meet your needs.

3) You have 2 new followers!

[Khalid Osman]

I learned a lot, thank you. I am always looking for things like this to add to the blog. I have a question here to have more values in addition to comments. I am planning to have some people logged in here from different areas in the world to write in Arabic. How I could do that, having them logged in to publish articles in Arabic? Those articles should appear, the way I use to publish. However, I do not want them to do administrational job here, until everything is OK. Many thanks.

[Account Deleted]

This is a nice upgrade. But I'd been bugging you guys to improve the Commenting System ---such as subscription to comments, and the ability to personalize it or adding the "Your comment is awaiting approval before being published." I had submitted tickets about these because a lot of my readers ask me how can they subscribe to my post comments. And most of them wonder where did their comments go, and most oftentimes, they would submit the same comment multiple times thinking that their comments did not go through.
Instead of this "highlighted comments", why don't you attend to the more important aspects of the commenting system?

[Nicole Beltane]

While its great that you are sharing tips and ideas, how about making some of these things standard so it can if you want it to be just a tick box and it will change it like the rest of the buttons {facebook / twitter / etc}
why does everything have to involve adding CSS to the blog.

[Judy]

This is simply awesome! Thanks for sharing the tips!