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.

How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts, however for the Blogger platform it wouldn't be an easy task to add it. But who said it's impossible? You don't have to look much further than this blog. In this tutorial i'll show you how to create a calendar style date for your Blogger posts.

How to create calendar style dates in Blogger

                                                                   DEMO

For adding the calendar style to our blog date header, we should firstly setup the displaying for the date. Log in into your Blogger Dashboard, go to Settings > Formatting - look for the Date Header Format option and change the date so that it is the first day, then the month and finally the year, for example: 28 July 2012 - see the screenshots below

calendar style, calendar icons, blogger tips
If you're using the newer interface: go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below:

Now go to Design > Edit HTML > thick the "Expand Widget Templates" checkbox and search (CTRL + F) the following line:

       <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

If you find it twice, replace it twice with the code below:

       <div id='Date'>
       <script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
       </div>
       <b:else/>
       <div id='Date'>
       <script>changeDate(&#39;&#39;);</script>
       </div>

Now add the following code just ABOVE </head> (CTRL + F to find it)

        <script type='text/javascript'>
        //<![CDATA[
        var DateCalendar;
        function changeDate(d){
        if (d == "") {
        d = DateCalendar;
        }
        var da = d.split(' ');
        day = "<strong class='date_day'>"+da[0]+"</strong>";
        month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
        year = "<strong class='date_year'>"+da[2]+"</strong>";
       document.write(month+day+year);
       DateCalendar = d;
    }
       //]]>
       </script>
       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
       <style type='text/css'>
       /* Calendar style date
     ----------------------------------------------- */
       #Date {
       background: transparent url(http://1.bp.blogspot.com/-NVj6tUKJgLo/UBShW2dCLSI     /AAAAAAAACZk/3TkTa8Hzqt0/s1600/calendar07.png) no-repeat;
      display: block;
      width:60px;
      height:60px;
      float: left;
      margin: 15px 2px 0 -108px;
      padding: 0 0 8px 0px;
      border: 0;
      text-transform: uppercase;
    }
     .date_month {
      display: block;
      font-size: 15px;
      font-weight:bold;
      margin-top:-1px;
      text-align:center;
      color:#ffffff; /* Month's color */
    }
      .date_day {
      display: block;
      font-size: 28px;
      font-weight:bold;
      margin-top:-8px;
      text-align:center;
      color:#282828; /* Day's color */
    }
      .date_year {
      display: block;
      font-size: 10px;
      margin-top:-8px;
      text-align:center;
      color:#282828; /* Year's color */
    }
      </style>
      </b:if>

Before saving your Template:

    To change the calendar style, replace the url in blue with yours;
    If the calendar doesn't appear correctly, change -108 with 0;
    With green are marked the areas where you can change the color of the dates

Numbered comments on threaded comments for Blogger/Blogspot

In a past tutorial i've been talking about how you can add numbered comments to your blogger blog but today we'll learn how we can add numbered comments along with comment bubbles on our threaded comments too.

What the following CSS trick will do for you:

   1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1.
   2. Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
   3. Then is incremented in one unit the counter (counter-increment).

See the screenshot:

 

Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.

Steps to add bubble comments count:

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: Search (CTRL + F) for this piece of code:

]]></b:skin>

Add the following code just above it:

.comment-thread ol {

counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqoFPzfz_RJVmNtYuzQAX_WT5rFv60T4zpKGKDRJVnxxJ03z2JWVMf8DSNLSz49GFaAzlZ8Frmb-FBHykuwHz6e4d0JT9iJ0TrUPiI1sEK6QkWwGnDlIXb-DfVs_Nbp6GSKw41U_nmHTZ/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Note:

    remove the code in red (including the blue code) if you want to remove the comment bubble
    to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're undecided what icon you should use, you can find some cool icons in my previous posts (check out here and here)
    to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
    to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

Step #3: Now save the template and you're done!

 If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.

How to remove blogger Picture/Image shadow and border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below):

If you are using the Old Blogger Interface :

    Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


If you are using the New Blogger Interface :

    Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code    -Press enter after the last character of the last line } - Apply to Blog.

  
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
     padding: none !important;
     border: none !important;
     background: none !important;
     -moz-box-shadow: 0px 0px 0px transparent !important;
     -webkit-box-shadow: 0px 0px 0px transparent !important;
     box-shadow: 0px 0px 0px transparent !important;
}

Now your blogger images should appear without any border or shadow. Cheers!

Update :

If the above method doesn't work for you, do the following :

- Go to Blogger's Dashboard > Design (Layout) > Edit HTML
- Thick the "Expand widget templates" checkbox;
- Search (CTRL + F) for the following code:

       border: 1px solid $(image.border.color);

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 

- Delete it and Save your template.