Add Eye Popping Comment Bubbles to your Genesis site

Share the love:
facebooktwittergoogle_plus

Comment count Comment Bubbles

Comments are the life blood of every blog. It indicates that people like and enjoy engaging with your content. So if your blog gets lots of comments, why not show it off? It makes a a great first impression with your new visitors.

Not only will they be more likely to read the entirety of your posts, but there is a better chance they will ultimately leave a comment as well.

One way to make your comment counts stand out is by adding a comment bubble to your blog posts. You can see examples of comment bubbles in use on blogs like Smart Passive Income and Viperchill. Both blogs get lots of comments on every blog post they publish, so it makes sense that they want to show their comment counts off.

SmartPassiveIncome-CommentBubble

While I can only hope to achieve the type of readership those two blogs get, I still thought it would be fun to learn how to add comment bubbles to my blog posts. It’s actually not too difficult, so in this tutorial, I’m going to show you how to do it.

ViperChill-CommentBubble

Step 1 – Customize your Post Info

We want to place our comment bubble in the post info area of the blog, which is normally where the author and publish date are. The Genesis framework includes a hook called genesis_post_info which we can leverage for this by using this code below. (Genesis extender users can just copy and paste this code directly into the Functions tab)

The key here is that I have created a span with the class .bubble that hold our comment count. This is the hook that I will use to style the comment bubble.

Step 2 – Style the comment bubble

The comment bubble that SmartPassiveIncome uses is actually an image with the comment count overlaid on top. I have limited graphic design skills of my own, so I wanted to create my comment bubble using pure CSS.

To help me get started, I used this CSS Bubble Generator to start me off with some initial CSS. Then I played around with it a bit, which resulted in the CSS code you see below.

I used a subtle gradient for the background of my comment bubble. You can change the background color of the comment bubble to fit your site by replacing the background-image properties that I used in the .bubble class. You may want to check out my favorite CSS gradient generator here to help you with this.

I’ve also added some other comments to the CSS code above to help you tweak the look and feel of your comment bubble to match the look and feel of your site.

Need any additional help? Feel free to leave me a note in the comments.

Comments

  1. Lisa K says

    Love the comment bubble effect Josh! It really does make your number of comments pop out compared with what you see with normal wordpress themes.

  2. says

    Josh, this is a great post. I like that you linked out to the bubble generator. That is new to me but extremely helpful in my day to day life as a designer.

    One question. Is it possible to do this without wrapping the <A> inside of a span? I don’t mind doing the filter but I hate to ad to my function.php for such a small change to css. Is there a pseudo class we could use or something?

  3. says

    Is it possible to add these comment bubbles to the Genesis Featured Post widgets post info section? I’d like them to come up on my home page.

      • says

        Hi Josh, No I haven’t tried because I have no idea how to add them. I’m very new to WP and php. Other than adding some short code into the featured post widget info on the widgets page. Is it possible to create a shortcode for the bubble?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge