Mengisi masa lapang dengan aktiviti blogging.

Wednesday, November 21, 2012

How to add a comment count bubble

Credit to 
http://helplogger.blogspot.com/2012/04/how-to-add-comment-count-bubble-to.html

Having a comment count bubble to each blogger post titles makes your blog more attractive. This improves not only your comments count but also allows your visitors to see what are the most popular posts on your blog. If a post has more comments then it will show the popularity of posts to your readers and visitors. So let's start adding this feature to your blog post titles by displaying the total count of the comments for your Blogger posts:
Step 1.

 If you are using the old Blogger interface:
  • Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
  • Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) the following piece of code in your template:

]]>

Step 3. Place this code just above ]]>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeM_spPxFs2b35xjpd1n-LGtar9sEBwV0fVlIWv30ZL1M3-czFQWcX-lYWzGj8VXMh8tNdKueIqtqfFQsBubq6CLbnce6eVtfKuoxrd_GqoTZR7VJYRyFl9EObQ003NYZ4CaUl0QCBsrS9/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. Now find the below code: 



Note: If you can't find it, search this code instead:


     


Step 5. Add this code immediately after it:


style='color: 
#ffffff; font-size: 18px; font-weight: bold;'>

Note:
- to change the color of the comments number, replace #ffffff with the hex value of your color;
- to change the font size, increase/decrease the 18px value;

Step 6. Now Preview your template and if everything is ok, Save the Template.

You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)

bubble comment count, bubble blogger postsblogger comments, comment countblogger blogspot, blogger commentsblogger bubble comment countcomments in blogger titlesblogger tips, blogger tricksblogger widgets, bubble comment countbubble comment countBubble Comment CountBubble Comment Count, blogger blogspot

More tutorial, please visit http://helplogger.blogspot.com/

0 responds:

Iklan Tepi

Catatan Pelawat

Stats