Comment bubbles for Blogger using an image

Similar hacks have been available before, this one adds nothing new or special to them, except the CSS code may be a bit tidier. Some might want to use this in their Blogspot blog for its simplicity: the same version gives same results in all browsers, and the CSS code is not long.

In this blog I use a combined method that uses CSS3 whenever supported, so this image comment bubble hack is not installed in this blog, instead a combination of this hack and the CSS3 comment bubble hack, more about that in this post.

Add comment count code

First we will add the link to "post.url#comments" next to the post title. 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

If you want to have own bubble image, first you need to upload the comment bubble image to some server, to your Picasa web album, for example, and get its url address. I use this image uploaded to my Picasa web album, its url is https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiustzmZZ_DVTnRogE2sCovlleU6eLrJRn1oHbGe6cMmLm4kcqMNhD8BC2ha4QqDKZYbn5I9oxxOTgu6UzxYkRHdJDZ2yZAKaA5BRThJDFlz7nmFTW7ChfqrhG8oO4ZXscQLUwWDwUEoIo/s800/comment_bubble.jpg.

Then go to Template designer, choose Advanced, Add CSS. Add the following simple CSS definition:

Data provided by Pastebin.com - Download Raw

Change image url, if you want, and image width and height. Paddings can be changed to change text position inside the comment bubble image. Apply to blog – comment bubbles are installed.