How to Add A Comment Count Bubble To Blogger Post And its Titles

A comment bubble with current number of comments displayed to each blogger post titles could make 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. When a post has many comments, then the comment bubble will show the popularity of your posts to readers and visitors so that they might be more interested in reading them.

So let's start adding it:

Step 1.Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)

Step 2. Select "Expand Widget Template" (make a backup)

Step 3. Find - using CTRL + F - the following piece of code in your template:

           ]]></b:skin>

Step 4. Add the below code just above ]]></b:skin>:

           .comment-bubble
 {
            float : right;
            width : 48px;
            height : 48px;
            background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/AAAAAAAAALI        /03AG305CesI/s1600/speech+bubble+green.png);
            background-repeat: no-repeat;
            font-size : 18px;
            margin-top : -15px;
            margin-right : 2px;
            text-align : center;
 }

Step 5. Now find this code:

            <b:if cond='data:post.title'>
            <h3 class='post-title entry-title'>

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

           <b:if cond='data:post.title'>
           <h3 class='post-title entry-title' itemprop='name'>

Step 6. And add this code immediately after it:

            <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl'
             expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight:  bold;'>
            <data:post.numComments/></a>
            </b:if>

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 7. Preview your template and if everything is ok, click on Save Template.

Comment Bubbles :
 
You can choose one of the images below - right click on the desired image and select "Copy Image Address/Location", then replace the red code from step 3 with the address you just copied.

 

How To Remove Blogger Navbar :

What is Blogger NavBar ?

Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

The advantages of it are the following :

- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.

So how we get rid of it? It is very simple. Just follow the next steps...

Removing The Blogger Navbar :

1. Login to your Blogger account, click on your blog name and navigate to Layout;

2. Look for the Navbar text and click on the Edit link as shown in the picture below:

 3. When the pop-up window appears, scroll down and select Off, then click on Save button:

You're done.