Hello Everyone! Welcome back to FreemiumTech Website. How are you all? I Hope you all are well. Today our Article is all about How to Add Post Clap Button in Blogger Website.
You might also be finding a way to implement this feature in your Blogger website, So Todat I made a tutorial for you to show how to add a post clap button in Blogger Website. I hope you like this Article.
This "Post clap button feature" is made with CSS, HTML and Javascript codes we included a clap SVG icon that was replaceable. If you want you can replace the svg icon according to your choose.
We included the latest neumorphism design that makes it a little bit attractive!
So, without wasting much time let's check How to add a post clap button in Blogger!
How to add a Post Clap button in Blogger?
Note: Before doing these steps we recommend taking a backup of your template, by chance if any mistake has been done, you can restore it later!
/* Clap button CSS by FreemiumTech */ @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: #9C27B0;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: #9C27B0;pointer-events: visible;}.drK .claps_button{background-color: #2d2d30}.claps {border-radius: 50%;background-color: #9C27B0; 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: #9C27B0;color: #9C27B0;fill: #9C27B0;animation: pulse 2s infinite;}.clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); max-width:200px; padding:15px 15px; border-radius:10px}/* Clap neumo */ .clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); max-width:200px; padding:15px 15px; border-radius:10px}.drK .clpN{background:#2d2d30;box-shadow:none}
If your theme has a dark mode feature then change highlighted drK with your theme dark mode class, If your theme did not have a dark mode feature or you using Median UI v1.6 or Median UI v1.6 based themes then keep it default!
Step 6: Then find <data:post.body/>
<b:if cond='data:view.isPost'> <!--[ 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> </b:if>
You can replace highlighted SVG Icon code with your SVG icon code!
Step 7: Then find </body> and paste the following javascript just above it
<b:if cond='data:view.isPost'><script>/*<![CDATA[*//* Clap button JS (FreemiumTech) */ 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>
Step 8: Then don’t forget to Save Theme.
Conclusion
In this post I have made a tutorial about How to Add Post Clap Button in Blogger Website. Which gives a colorful animation feel while hovering. I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.