How to Add Clap Rating Button in Blogger Post | Peak Fiction. How to add like button on Blogger. How to add a clap button to your blog. Peak Fiction

Hey there, folks! Welcome to Peak Fiction. Today, I've got an easy guide for you on adding a cool clap rating button to your Blogger website. Have you ever wanted to add a like button in your blogger website like Facebook. This clap or appulse button will look like Facebook like or reaction button and you can add it easily into your blogger website. It'll only take a few minutes, and you'll be using simple codes. This clap rating feature jazzes up your site with HTML, CSS, and JavaScript magic, featuring a replaceable clap SVG icon. Plus, we've sprinkled in the latest neumorphism design to make it extra appealing to your visitors. So let's learn How to Add Clap Rating Button in Blogger Post.

How to Add Clap Rating Button in Blogger Post | Peak Fiction. How to add like button on Blogger. How to add a clap button to your blog. Peak Fiction

How to Add Clap Rating Button in Blogger Post?

Now, let's dive into the steps below. Follow them carefully to seamlessly add the clap rating button to your Blogger website without any hiccups.

Step 1:

Before we start, it's wise to take a quick backup of your theme. In case of any missteps, you can easily restore it later.

Step 2:

Head over to the official Blogger website. Login and go to theme and from there click on Edit Html.

Step 3:

Now Search for ]]></b:skin> and paste the codes below above it.



/* 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}

Step 4:

Now copy below 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!

Step 5:

Now again copy given JavaScript code and paste the copied JavaScript code just above </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>

Once you've added the three codes, click on the save button to preserve the entire theme code. It'll take a few seconds to process, and upon successful completion, you'll see a message confirming the update. In case you encounter any errors during the save process, don't worry. Simply restore your backup code and repeat the steps mentioned earlier. This is How to add a clap button to your blog.

To customize the colors and styles of the clap rating button, tweak the provided CSS code. If you wish to change the colors, replace the color codes inside the CSS code. You can use Google Color Picker or any other third-party color picker website for the codes. So i hope you got How to add like button on Blogger.

Remember, paste the three codes in the correct place. If you don't, the code won't function properly. Take care to follow the steps precisely as mentioned above. I hope this clarifies the process of effortlessly adding a post clap rating button to your Blogger website using HTML, CSS, and JavaScript. If you have any questions, feel free to ask! This was all for How to Add Post Clap Rating Button in Blogger Post.