Show Comment Bubble At Top Of Each Blogger Posts

How To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that’s why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

As you would have checked my last blogger template-The latest Blogger template for sure and must have liked it.I have made 3-4 more proffesional templates for you,but unluckily today i got my exams schedule and will not be able to post these templates for you till 30 of july,so you have to wait for them ,as they need little finishng touch and testing with an installation guide,so will post these templates in beggining of august.

So we just continue with out tutorial on how adding comment bubble to top of each blogger posts.Some tutorials like these which you would like to read for sure are show labels as tags like woork and show post date as calender widget.

For demo of comment bubble you can check the my blog as i have comment bubble or check the demo blog too.

Now To make comment bubble,Just
Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

And Search For ]]></b:skin> tag and place the below codes before it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
padding:0px 0px 0px 0px;
}

In red above is the image link of bubble,you can use yours and don’t forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

Some Readers had problem in aligning the comment number in comment bubble.To adjust it just edit padding values according to you in above css.I have added four 0 values to padding,First one is for padding-top,Second for padding-left,third for padding-bottom and last for padding-right.

Now after adding above css just find the below codes and add the red codes in between them as i have shown below.

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’><b:if cond=’data:post.allowComments’>
<a class=’comment-bubble’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a>
</b:if>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Afer adding red codes in between them just preview your template,if comment bubble is ok,just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn’t have thought of.Enjoy this hack and let me know you liked it or not.
And Friends i will try to schedule one or two posts for you,but that for sure will be small blogger tutorials which also will be very useful for you to learn a lot.

Wish Me Good Luck For My Exams.sengihnampakgigi

59 Comments

  1. WidB July 14, 2009
  2. Karla July 15, 2009
  3. Ali Munandar July 15, 2009
  4. Blogging Tips July 16, 2009
  5. Anshul July 18, 2009
  6. hilkoo July 19, 2009
  7. Anshul July 19, 2009
  8. Anonymous August 3, 2009
  9. Anshul August 3, 2009
  10. Blogger Nutshell August 5, 2009
  11. Chic Mama September 5, 2009
  12. Anshul September 5, 2009
  13. Chic Mama September 5, 2009
  14. Anshul September 6, 2009
  15. masil September 7, 2009
  16. masil September 7, 2009
  17. Anshul September 7, 2009
  18. masil September 8, 2009
  19. masil September 8, 2009
  20. Anshul September 8, 2009
  21. masil September 8, 2009
  22. masil September 9, 2009
  23. Anshul September 9, 2009
  24. masil September 9, 2009
  25. Niku October 11, 2009
  26. Enzo November 20, 2009
  27. Enzo November 20, 2009
  28. Le Buduar December 4, 2009
  29. Anshul December 4, 2009
  30. Le Buduar December 5, 2009
  31. ClearlyEnlight, December 6, 2009
  32. Anshul December 6, 2009
  33. Ms Hetal Patil December 8, 2009
  34. Anshul December 8, 2009
  35. Softpump December 9, 2009
  36. cool buddy January 10, 2010
  37. Anshul January 10, 2010
  38. Kesit March 9, 2010
  39. VnPress@net March 20, 2010
  40. Anshul March 21, 2010
  41. mie April 28, 2010
  42. Anshul April 28, 2010
  43. mie April 29, 2010
  44. Sandro Marcos May 10, 2010
  45. Anshul May 10, 2010
  46. Sandro Marcos May 10, 2010
  47. Noushad Vadakkel May 15, 2010
  48. Anshul May 15, 2010
  49. hb May 26, 2010
  50. Anshul May 26, 2010
  51. RP4 July 4, 2010
  52. Anshul July 4, 2010
  53. KingDom XXL October 30, 2010
  54. Celebrity Gossips May 23, 2011
  55. Sudhir Dudeja May 28, 2011
  56. l'Iconoclaste June 4, 2011
  57. l'Iconoclaste June 4, 2011
  58. Ravikant Sanepara July 7, 2011

Leave a Reply