How to Add Post Clap Rating Button in Blogger
Hi to all, in this article I am going to tell you all about how to add post clap rating button in your blogger website easily in just few minutes by using simple codes.
Basically this clap rating button feature is made with HTML, CSS and JavaScript codes, we included a clap SVG icon that was replaceable.
And we also included the latest neumorphism design in this clap rating button which makes it more attractive to your website visitors.
So, read the below provided steps carefully and completely to get clear understanding about adding post clap rating button in blogger website without any issue or error.
Before doing these below steps we recommend you to take a backup of your theme, By chance, if any mistake has been made you can restore it later! and to backup your theme you can refer step-2
Steps to Add Post Clap Rating Button in Blogger
Login to Blogger Website
First of all you need to visit official blogger website.
Now you need to login to blogger website dashboard by using your login credentials safely.
Backup Blogger Theme
After login to blogger website dashboard, make sure you have backup of your blogger website theme, if any error occurs while saving the code then you can restore your backup code again and can run your website as usual.
If you want to backup your blogger website theme then follow below path.
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Captcha verification -> Save the downloaded file in safe place for future use.
Open Blogger Theme Editor Section
After successful backup of your blogger theme code, now you need to open bogger theme editor.
If you want to open blogger theme editor then you can follow below path.
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor section -> Press CTRL+F to search the tags -> Add the below codes in theme editor.
Adding CSS code
Now you need to copy below provided CSS code and paste the copied CSS code in ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>.
/* Clap button CSS*/
@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!
Adding HTML Code
Now you need to copy below provided HTML code and paste the copied HTML code just below <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!
Adding JavaScript Code
Now again you need to copy below provided JavaScript code and paste the copied JavaScript code just above closing body tag or </body> tag.
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*//* Clap button JS*/ 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>
Saving the Code
After adding the three codes you need to click on save button to save the entire theme code.
It will take few seconds to process the entire code and after successful processing of the theme code you will get a message i.e. Updated Successfully.
Note
If you get any error or issue while saving the entire theme code then you need to restore your backup code again and need to repeat the same process as mentioned in the above provided steps carefully.
If you want to change the colors and styles of the clap rating button then you need to modify above provided CSS code.
If you want to change the colors of the clap rating button then you need to replace the color codes inside the CSS code and for color codes you can use google color picker or you can use any other third party color picker website.
Paste the above provided three codes in correct place, if you will not paste the codes in correct place then the code will not work, so be careful while adding the codes in correct place as mentioned in above steps.
Conclusion
I hope that you have understood above about adding post clap rating button in your blogger website easily in just few minutes by using HTML, CSS and JavaScript.
