Pure CSS3 comment bubbles for Blogger

A week ago or so I implemented the comment bubbles for this blog. There are some comment bubble hacks for Blogger that use image, but I found none with CSS3 bubbles, so that is what I started from. I show in this article, how you can make CSS3 comment bubbles like this for Blogger.

"Pure" in this context means that I don't use images. I really don't know much CSS so I don't know if the product-dependent -webkit-, -moz- and -o- style settings are "pure CSS3" or not.

Browsers like Firefox, Opera and Chome already support CSS3, and soon also Internet Explorer will, so you might already want to have this clean CSS only solution in your blog. It also loads a bit quicker without external images that cause http request. This CSS solution degrades to quite nice looking and usable element on Internet Explorers (version 9 and below), too, see the end of this article.

Because CSS3 is not fully supported by Internet Explorer versions below 10, in this blog I expanded this CSS only solution to use image in IE8 and below, and CSS + gradient data URI in IE9. So this CSS only hack is not installed in this blog. I'll tell you about "pure image comment bubbles" and the combined solution in later articles.

Add comment count code

First we add the link to "post.url#comments" next to the post title, where link's text is the number of comments in that post. Open your template html, and expand widget templates. Find lines:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>

After those lines add (doubleclick to select for copying):

<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>

Save the template.

Add CSS for comment bubbles

I chose the colors for my bubbles like this, you might want to use some other colors that suit your template:

Go to Template designer, choose Advanced, Add CSS. Add the following CSS:

Data provided by Pastebin.com - Download Raw

Apply to blog. And you have your CSS comment bubbles!

This hack and Internet Explorer

In IE7 and below the bubble is only a rectangle with borders and solid background color.
In IE8 the comment bubble has solid background color and no rounded borders.
IE9 does quite well, only the gradient background is missing (background is solid color).