Add A Fixed Jump To Comments Button In Blogger

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.

 

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>
</b:if>

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.

The CSS

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