Create a simple comment button for blogger

Create a simple comment button for blogger

Hi guys, it’s 12:10 p.m. now. Now is the time to take advantage of writing articles for you because this time is free and quiet. Without further ado, our trick today will be how to insert a button that, when clicked, will automatically scroll down to the comment box. It would be very convenient to not have to scroll all the way down there. Now get to work!

Create a simple comment button for blogger

Step 1: Access Blogger Admin   Theme    Edit HTML

Step 2: If Template does not have Fontawesome library, add below code before </head>. tag

<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’ type=’text/css’/>

Step 3: Add the following CSS before the ]]></b:skin> . tag

.comments-publish a{color:#fff!important;line-height:5px;font-size:13px;margin-top:3px} 
.comments-publish{float:right} 
.comments-publish a{box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:2px;background:linear-gradient(to left, #ff9800, #f44336); border:1px solid #ddd;border-radius:4px} 
.comments-publish .fa{margin-right:5px}
Step 4: Insert the following code where you want to display the comment button:

Style 1: No slide effect (no Js, no impact on page loading speed)

<b:if cond=’data:blog.pageType == “item”‘> 
<div class=’comments-publish’> 
<a href=’#comment-editor’ onclick=”> 
<i class=’ fa fa-plus’/> Write a comment 
</a></div> 
</b:if>
  • Style 2: Has a sliding effect (more professional but may not be applicable to Templates like the StarCuongIT blog being used, Js slides it in the form of a Back To Top button)
<div class=’comments-publish’> 
<a href=’#comment-editor’ onclick=”> 
<i class=’fa fa-plus’/> Write a comment 
</a><script type=’text /javascript’>$(‘.comments-publish’).click(function(){$(‘html,body’).animate({scrollTop:$(“#comment) -editor”.offset().top},1000);});</script></div> 
</b:if>

In it, please note the following places:

<b:if cond=’data:blog.pageType == “item”‘> … </b:if> : allows display only on article pages.

#comment-editor: the position will go to when clicking that button, there will be some of you using #footer, #comment-form…depending on the Template but I recommend using #comment-editor because this id is available by default.

1000: sliding speed

Step 5: Save the Template again.

Epilogue

Ok. So that’s it then. With just a few simple steps, you can already own yourself an extremely simple and convenient comment button.
Good luck!

Click to rate this post!
[Total: 0 Average: 0]
6
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x