Add A Fixed Jump To Comments Button In Blogger


Colorful Comments ImageGuest Post - Our host is Deepak Kamat, In this post he walks you through how to add a fixed jump to comments button on Blogger blogs.See How To Become a guest author on Spice Up Your Blog.

Comments are the major way of getting feedback about our blog posts from readers, therefore comments are really an essential part of any Blog. If you are a blogger too then your always delighted to see new comments on your posts.But there are times when you don't get any comments at all, often in long posts. The problem is that readers don't scroll through the whole page thus they miss the comment area.Even though people are reading your posts you are not getting any comments at all and it's frustrating.

So, how can you improve your site in a way that your blog post gets more comments and the comment form is easily accessible to readers?

This post covers this topic and tells you an easy and effective way of encouraging your readers to comment.The button will be fixed in the bottom right of the page, check out the demo.

View Demo Button

Jump to Comments button

It's not going to be a difficult task implementing this button. This button can be used for default Blogging comment system and also for Disqus comments, the HTML is little different for these two comment system.

HTML for Blogger Comment system

In Blogger the comment form is always below the comments so if you want the button go to the comment form, visitors won't be able to see existing comments at the same time they have to scroll up to see the comments.

So for Blogger commenting system i am providing two HTML.

Add the code you want to use in a html/javascript gadget.Go to your layout page > Click 'Add a gadget' > Choose Html/Javascript and paste in the code then save.

- If you want the visitors to first see the existing comments then use this HTML

<a class="cmntlink" href="#comments">Comments</a>

- But if you want the button to jump directly to the comment form then use this

<a class="cmntlink" href="#comment-editor">Comments</a>

Note : To display the 'Comments' button only on post pages we have to wrap the HTML anchor link in blogger's condition tag. For Example -

<b:if cond='data:blog.pageType == "item"'>
<a class="cmntlink" href="#comments">Comments</a>

You can change the text between the a tag. You can change 'Comments' to anything you like such as 'Add Comment', 'Post a Comment' etc.

HTML for Disqus comments system

Disqus is another comment system which is famous among Bloggers, it is used widely in all type of websites and blogs. We can also make the button work with Disqus with a little change in the HTML

<a class="cmntlink" href="#disqus_thread">Comments</a>

One of the best thing in using Disqus is that it automatically updates the number of comments on that post in text of this anchor link.


HTML alone can only perform it's task but to give it a good look and a feel we need CSS. CSS3's new properties helped a lot to make this button. So here's the CSS code.

To Apply the CSS follow these instruction.

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

Note - This is a scroll box make sure to get all the code.
a.cmntlink {
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -ms-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -o-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none !important;
box-shadow: 1px 1px 10px grey;
text-shadow: 0 1px 0 white;
border: 1px solid gainsboro;
padding-bottom: 13px;
color:black !important;
text-decoration: none;
display: inline-block;
padding: 10px 23px;
border-radius: 3px;
position: fixed;
z-index: 9999;
bottom: -3px;
right: 3px;
-webkit-transition: all .400s;
-moz-transition: all .400s;
-ms-transition: all .400s;
-o-transition: all .400s;
transition: all .400s;

/* Hover Effects */

a.cmntlink:hover {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border-color: #999;
color: #333;

/* Effect when it's clicked */

a.cmntlink:active {
border-color: darkRed;
color: black;

CSS is lengthy but useful too. You can make small changes in the CSS only if you know what you are doing.

Benefit ?

This button is very efficient, this good looking function in your blog increases the number of comments on your blog posts for sure as your visitors get access to the comments in a click. Adding this means increasing feedback of your readers and that makes your blog more popular.

guest blog postBy Guest Author -Deepak Kamat is a blogger based in India. He utilizes his knowledge about web designing to make blogs better, he writes on his blog called Stramaxon

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Thanks Mr. Paul, I requested to make this same code previou year, thanks for sharing it

  2. Question: I copied/pasted the whole Css and I got the little pop-up at the bottom right saying "add a comment here" yet nothing happened when people clicked on it. Any advice?

  3. How come it won't work for me? The button is there, but when you click on it, nothing happens!

    1. Hi Denise, I checked out your blog and you must have removed the button again.The reason it was not working is you dont have the comment form embedded, you have a link to post a comment.You can change this is your settings under posts and comments.

      I see you added the spin social icons.Now you have not added a feed which would be recommended.Do you know your blog has a default feed ? This is yours


      You can add that to the Rss Feed icon.Also you should remove the feed count button :)

    2. Hi Paul - first off, you rock. Ok.... so I re-added the button and also changed the 'posts and comments' to "embedded.' It's still not working?

      I also removed the feed count button.

      Laslty.... I have the Rss Feed you provided (thank you!). But... where do I add that?

  4. Actually... now that I am looking at my blog... the pop-up for the comments isn't even there yet it's showing on the Css section. Ugh, I know computers pretty damn good but I am getting frustrated with Blogger!! Haha!

  5. I tried to do this but I had a few problems:
    1) the comment popup appeared in also in my main page, even though I added the html line insure this won't happen
    2) I wasn't sure what to write in the #comment-editor section. when I posted it the way it was id didn't work.
    Thanks for you help!

  6. Is there a way to have the comment button appear in the post page, but not in the main page? I followed the instructions for having the conditional line in the HTML gadget, but I still see the comment button on my main page.

  7. Thanks for sharing. Its good to see fresh content always.

  8. I was the first to your blog. I like it here. I will often come to.

  9. Thanks for sharing.Thanks froum Turkey.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us