How to Add Clap Reaction Button on Blogger Website

Benefits of Clap Reaction Button

Because so many readers didn't write comments because they are busy or not wanting to do, they can easily describe them by pressing the Clap Reaction Button. The advantages of using the Clap Reaction Button are listed below.

1. According to the article, sending feedback is simple for anyone to do.
2. reactions that are simple to monitor.
3. The article may benefit from the user's use of the reaction button.
4. If you want to look at demo just scroll down at the last of this article and you will see the clap reaction button.

Let's Do a Demo Here...!

View Demo

How to Add Clap Reaction Button on Blogger

You can simply copy and paste the code in this blog post. Enjoy your explorations and learning! I hope you have an idea of what the project is about.

HTML Section

We have to use all of the necessary elements and attributes to set up the structure of the Clap Reaction Button first. This will be our first step to creating Clap Reaction Button. Later we will know how to code the CSS portion to include styling and align the tags. Below is the HTML Code, Search for the <data:post.body/> tag and paste the code after <data:post.body/> tag.

<b:if cond='data:view.isPost'>
  <center>
       <p><strong>Rate This Article</strong></p>
<!--[ Clap button ]-->
<div class='clpN'><span class='clap'>
<button class='claps_button'>
<!--[ Clap SVG Icon ]-->
<svg class='svgIcon-use' height='33' viewBox='0 0 33 33' width='33'><path d='M28.86 17.342l-3.64-6.402c-.292-.433-.712-.729-1.163-.8a1.124 1.124 0 0 0-.889.213c-.63.488-.742 1.181-.33 2.061l1.222 2.587 1.4 2.46c2.234 4.085 1.511 8.007-2.145 11.663-.26.26-.526.49-.797.707 1.42-.084 2.881-.683 4.292-2.094 3.822-3.823 3.565-7.876 2.05-10.395zm-6.252 11.075c3.352-3.35 3.998-6.775 1.978-10.469l-3.378-5.945c-.292-.432-.712-.728-1.163-.8a1.122 1.122 0 0 0-.89.213c-.63.49-.742 1.182-.33 2.061l1.72 3.638a.502.502 0 0 1-.806.568l-8.91-8.91a1.335 1.335 0 0 0-1.887 1.886l5.292 5.292a.5.5 0 0 1-.707.707l-5.292-5.292-1.492-1.492c-.503-.503-1.382-.505-1.887 0a1.337 1.337 0 0 0 0 1.886l1.493 1.492 5.292 5.292a.499.499 0 0 1-.353.854.5.5 0 0 1-.354-.147L5.642 13.96a1.338 1.338 0 0 0-1.887 0 1.338 1.338 0 0 0 0 1.887l2.23 2.228 3.322 3.324a.499.499 0 0 1-.353.853.502.502 0 0 1-.354-.146l-3.323-3.324a1.333 1.333 0 0 0-1.886 0 1.325 1.325 0 0 0-.39.943c0 .356.138.691.39.943l6.396 6.397c3.528 3.53 8.86 5.313 12.821 1.353zM12.73 9.26l5.68 5.68-.49-1.037c-.518-1.107-.426-2.13.224-2.89l-3.303-3.304a1.337 1.337 0 0 0-1.886 0 1.326 1.326 0 0 0-.39.944c0 .217.067.42.165.607zm14.787 19.184c-1.599 1.6-3.417 2.392-5.353 2.392-.349 0-.7-.03-1.058-.082a7.922 7.922 0 0 1-3.667.887c-3.049 0-6.115-1.626-8.359-3.87l-6.396-6.397A2.315 2.315 0 0 1 2 19.724a2.327 2.327 0 0 1 1.923-2.296l-.875-.875a2.339 2.339 0 0 1 0-3.3 2.33 2.33 0 0 1 1.24-.647l-.139-.139c-.91-.91-.91-2.39 0-3.3.884-.884 2.421-.882 3.301 0l.138.14a2.335 2.335 0 0 1 3.948-1.24l.093.092c.091-.423.291-.828.62-1.157a2.336 2.336 0 0 1 3.3 0l3.384 3.386a2.167 2.167 0 0 1 1.271-.173c.534.086 1.03.354 1.441.765.11-.549.415-1.034.911-1.418a2.12 2.12 0 0 1 1.661-.41c.727.117 1.385.565 1.853 1.262l3.652 6.423c1.704 2.832 2.025 7.377-2.205 11.607zM13.217.484l-1.917.882 2.37 2.837-.454-3.719zm8.487.877l-1.928-.86-.44 3.697 2.368-2.837zM16.5 3.293L15.478-.005h2.044L16.5 3.293z' fill-rule='evenodd'/></svg>
<button class='claps'/>
</button>
</span>
</div>
  </center>
</b:if>

CSS Section

Second, we have the CSS code, to which we have styled for the Clap Reaction Button structure. Additionally, we have aligned and positioned the CSS code so that it is properly positioned and does not become cluttered with appropriate CSS elements. Now, let's copy the below code and paste it before </b:skin> tag.

/* Clap button CSS by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ*/ 
@keyframes clap {0% {opacity: 0;transform: scale(0);}60% {opacity: 1;transform: translateY(-100px) scale(1);}80%{transform: translateY(-190px) scale(0.6);}100% {opacity: 0;}}@keyframes pulse {0% {box-shadow: 0 0;}70% {box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}}
.claps_button {border-radius: 50%;background-color: #fff;border: 1px solid;color: #41B375;width: 50px;height: 50px;outline: 0;cursor: pointer;filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.05));transform: scale(1);transition: all .1s ease-in;z-index: 1;fill: #41B375;pointer-events: visible;}
.drK .claps_button{background-color: #2d2d30}
.claps {border-radius: 50%;background-color: #41B375; color: #fff;position: absolute;width: 50px;height: 50px;border: none;z-index: 0;}button.is_clicked ~ button.claps {animation: clap 1s ease-in-out forwards;}button.claps_button:hover {border-color: #41B375;color: #41B375;fill: #41B375;animation: pulse 2s infinite;}.clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); padding:15px 15px; border-radius:10px}
/* Clap neumo */ .clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%);  padding:15px 15px; border-radius:10px}
.drK .clpN{background:#2d2d30;box-shadow:none}

JavaScript Section

The final phase of the project was JavaScript, to which we added logic and coded in accordance with the requirements, subject to a few conditions. Additionally, we have developed functions that contain the answers and will display them following the user's action. Now copy the below code and paste it before the </body> tag.

<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*//* Clap button JS by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ*/ var claps_button=document.querySelector(".claps_button"),claps=document.querySelector(".claps");claps_button.addEventListener("click",clap),claps.innerText="+"+(localStorage.getItem("claps")?localStorage.getItem("claps"):0);let count1=Number(localStorage.getItem("claps"))?Number(localStorage.getItem("claps")):0;function clap(t){count1+=1,localStorage.setItem("claps",count1),claps.innerText="+"+count1,claps_button.classList.toggle("is_clicked"),setTimeout((()=>claps_button.classList.remove("is_clicked")),1e3)} 
/*]]>*/</script>
</b:if>

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ