Hello and welcome back to our blog Tech and Fun Zone. I hope you all are doing good these days. Today we are going to learn How to Add Clap Reaction Button on Blogger. It's a very helpful widget for bloggers.
What is Clap Reaction Button
This script is responsible for collecting visitor responses to the article is the reaction button. Your website's speed will not be hampered by this script.
It's been a long time since the 'Reaction' button came on Blogger and Wordpress site. Many times you do not like some posts or articles, or if you like it too much, then the author gave you an option to give a react to it. There are many types of reaction button availabe for blogger.
This reaction button is a Clapping Reaction Button, that means if you like the post or article then you can appreciate it through the Clap Reaction Button. Now you can express your feelings in many more ways on the world's largest Blogging network. Its time to use Clap 'reaction' button in our sites.
Which template is suitable for this?
Plus UI is a tweaked version of Jagodesain's Median UI templates that has more features and a better look and feel. Deo Kumar has created the Plus UI 2.6.2 Premium blogger template, which includes advanced customizations and features.
Maker developed the Plus UI, a one-of-a-kind Blogger template, with the assistance of Imagz and Median UI Blogger Template. Plus UI also includes the Median UI Dashboard and IMagz Landing Page, and UI Concept also includes the footer of the Fletro pro template.
The fact why are we going to add this Reaction button in Plus UI Template, because it has developed in a way that the reaction button will work perfectly with it. It has some advanced features and minfied javascript to work faster.
You can also use this Clap Reaction Button in any blogger Template. We tested this in diferent template and it's working fine in all of them.
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.
- According to the article, sending feedback is simple for anyone to do.
- reactions that are simple to monitor.
- The article may benefit from the user's use of the reaction button.
- If you want to look at demo just scroll down at the last of this article and you will see the clap reaction button.
How to Add Clap Reaction Button on Blogger
-
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. 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.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.
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.
<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>/* Clap button CSS by Techandfunzone*/
@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}<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*//* Clap button JS by Techandfunzone*/ 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>Term's of use !
The templates or Scripts are for a personal use only. How personal can it get? Well, you are very much encouraged to download the template or Script of your choice and use it. But Personal means that you can’t make business out of our templates or Scripts. You are not allowed to sub-license, transfer, resell or republish any of the templates or scripts even for free.
Conclusion
Therefore, this is the tutorial about How to Add Clap Reaction Button on Blogger. I hope you will find this Article very useful. If you have any issue regarding this External Hard Drive Data Recovery in Windows, feel free to comment us. Also You can contact us if you encounter a problem or error.
© Tech & Fun Zone