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 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: 

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 :)

COMMENTS

BLOGGER: 1
Loading...
.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Add Circular Background Design To Disqus Comment Count Link
Add Circular Background Design To Disqus Comment Count Link
http://3.bp.blogspot.com/-0yCDJ1INlWo/TtjFHO3jp9I/AAAAAAAABq4/rGuUfXD7EkI/s1600/discuq.png
http://3.bp.blogspot.com/-0yCDJ1INlWo/TtjFHO3jp9I/AAAAAAAABq4/rGuUfXD7EkI/s72-c/discuq.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2011/12/add-circular-background-design-to.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2011/12/add-circular-background-design-to.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade