Add Circular Background Design To Disqus Comment Count Link

One of our reader asked the way by which we could design Disqus comment count link with a black circular image. Normally our Disqus comment ...

One of our reader asked the way by which we could design Disqus comment count link with a black circular image. Normally our Disqus comment count link just looks casual one with link showing something like this : (3 Comments So far etc).

In case you haven't applied Disqus comment count to your Blogger blog yet, you may like to read: 

• Show Disqus Comment Count of a Post Beside Post Title in Blogger

What we will be achieving is something shown below in the picture. Notice the black circular background for the Disqus comment count.

So lets start!

Step 1: Modify Disqus Comment Count Style

Make sure that your Disqus comment count link shows the number of comments and not a statement (if you use any). Normally people do like to use such 3 type of cases where the comment count shows ( 0 comment ) for no comments, (1 Comment) and (3 Comments) for more than one.

For the purpose of this tutorial we have to use just the comment count number and no statement with (as it wont adjust in the circular background that we are to apply.)

1- Go to Disqus (your blog account) Dashboard >> Settings >> Appearance. Now scroll down almost till the end where you would see 'Disqus Comment Count Link' settings.

Make sure you add the following tag to all of the 3 fields:

{num}

Now click save settings pop up options.

Step 2: Add CSS code to your Blogger template

Now go to your Blogger Design >> Edit HTML options and download the template for backup purpose. Then search for the following code by Ctrl + F:

]]<>/b:skin>

Now simply paste the following code above it.

.comment-link {float: right;width: 58px;height: 38px;padding-top: 20px;text-align: center;font-size: 15px;font-weight: bold;background: url(http://1.bp.blogspot.com/-gT8cTPX_PKQ/TiJ-yoVAjGI/AAAAAAAAAn4/eCzUsgGxS-k/s1600/comm.png) no-repeat scroll center;}
a.comment-link, a.comment-link:hover {color: #fff;}

Thats all. Finally click save template.

Note: The Disqus settings take 3-4 minutes to update. You may see the '0' comment count in the circle on 'Main blog page' but it would not be the case on 'Post pages' immediately. So just wait for 2-3 minutes.

Hope that was useful.
Peace :)