Wednesday, 23 May 2012

Add Bubble Comments Count in Blogger Post Title

bubble



Today i will teach you how to add good looking attractive and customize-able comment bubble button near to post title.It all about HTML you need little bit html help to do this action so lets start our mission

Follow Steps to add bubble comments count


  • Go to blogger dashboard.
  • Now click on tamplete tab.
  • Now click on Edit Html button.
  • Tick expand widget.
  • Search for (ctrl + f) ]]></b:skin>  .
  • Paste the below code above  ]]></b:skin> 
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMiW9EMU5wyAilvyYchhyQ429XPJddX0urGHbuxYNYNAE7Y2osaG4EDJl5mjafByjFM8CavERIZheJPYyX0YJUGy1QOZtWBeH-2pxUnil0j-_Zpt_DQyttCD-RHfl7uk-yCY_vHut7byS/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}   


  •  Now find  <b:if cond='data:post.link'> And paste below code above it.
<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>


  • Now click on save template button and preview your blog.



Customize


To use this images [Right Click and "Copy Image Address/Location"]







0 comments:

Post a Comment