3 Most Discussed Widgets with Comment Counter for Blogger

A widget is a page element that you may add to a blog or website with just a piece of code. The widget then appears as if you were adding a logo to a car, except that widgets are often able to do something more than just look pretty. This article covers three widgets that may be used with the Blogger CMS (content management system). The widgets all have a comment counter. To try and make the article easier to understand, all of the HMTL code has been put into italics.

Blogger comment counter widget one

When you work with Blogger, you can set a comment counter onto the default template that Blogger gives you. This is done by going to Page Element, to Blog Post and to Edit. You can show how many comments your blog has as a whole, and you can show how many you have per article/post.

Log into Blogger and then go to edit your HTML on your blog template. On the dashboard of your Blogger content management system you need to go to Layout/Design and to Page Element and then to Edit HTML. Ideally, you should save your current blog template and design just in case you make a big mess of things. This will allow you to put things back the way they were. Now you can download the full template by clicking the link that says such.

Within the Edit HTML Page section you will see a small widget box and inside you will see the “Expand Widget Template” where you may click the small box. The Blogger content management system will create the blog template code and you will be able to edit the comment code. From here you may admire the comment code, or you may enter the comment counter code. You can manipulate the code as seen below so that it has the comment counter in it:

gt

;

<h4>

< b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/>

< data:post.numComments/> <data:commentLabelPlural/>: </b:if>

< /h4>

That is the code to put your comment counter near the top of the page. You can use this code to add your comment counter:

.comment-thread ol {

 counter-reset: countcomments;

 }

 .comment-thread li:before {

 content: counter(countcomments,decimal);

 counter-increment: countcomments;

 float: right;

font-family:verdana, georgia, arial;

 font-size: 17px;

 color: #778577;

 padding-left:11px;

 padding-top:4px;

 background:#ffffff ;

border:1px solid #dcdcdc;

border-radius:8px;

 margin-top:9px;

 margin-left:15px;

 width: 56px;

 height: 45px;

 }

 .comment-thread ol ol {

 counter-reset: contrebasse;

 }

 .comment-thread li li:before {

 content: counter(countcomments,decimal) "." counter(contrebasse,decimal);

 counter-increment: contrebasse;

 float: right;

font-family:verdana, georgia, arial;

 font-size: 14px;

 color: #677666;

 }

Blogger comment counter widget two

Go to your Blogger dashboard by signing in. you then go to Template and you Edit HTML. You then need to find the part that says ]]></b:skin>

You can find this bit by using the search function with CTRL+F. Once you have found that piece of code, you can enter this code below it:

.comment-count {

float : right;

width : 46px;

height : 48px;

background : url( Your Image URL );

background-repeat: no-repeat;

font-size : 28px;

position:absolute;

margin-top : -13px;

margin-right : 5px;

text-align : center;

}

Now that you have your comment count attached to your post header, you can choose the comment count background by adding the URL of your choice to the area of code that says, “Your Image URL”.

To add the comment counter code then you need to use the CTRL+F function to find this bit of code

 <h2 class='post-title entry-title' itemprop='name'>

Or this bit of code:

 class='post-title entry-title'

Below just one of these codes you must add the following:

<b:if cond='data:post.allowComments'>

 <a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

 </b:if>

Now save your template and you have finished.

Blogger comment counter widget three

Go to your Blogger dashboard and click on the template section, edit your code, expand your widget and use the search function to find either:

<data:post.title/>

</b:if>

</b:if>

</h2>

</b:if>

Or find:

<div class='post-header-line-1'>

<span class='post-comment-link' style='Float:right;'>

         <b:if cond='data:blog.pageType != &quot;item&quot;'>

           <b:if cond='data:post.allowComments'>

             <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvP3LPKbH63_3kso6T2EU07mH0ecY_2gULeCxNln-yd90iRZrKo_tSUKZ_3SncP5MExU59dD9NAMnYGyeOlC86_dRYczq1KXt9N8k1xP6m9p8a7IdP1kIDDVRMkIA3LkGY7SnnidAdMzj/s400/icon_comments.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>

           </b:if>

         </b:if>

       </span>

The URL in the middle of all that gives you a nice bubble widget, but you can change it for the bubble counter design of your choice. Save your template and you are all done.

Additional notes

When you see sections such as margin-right : 4px; or color: #666666; then you may change these bits if you wish. You may change the numbers to alter to margin sizes and such if they have the letters px next to them, and the color may be altered by changing the numbers next to the hash (#) symbol.

Author bio:

Sonia J. is an author of this post. She's also in a team of http://writing-service-assistant.com/ that helps students to find the most reliable and professional writing service.