How to Install Applause Reaction Widget on Blogger

On this occasion, the admin wants to share a little more about blogging, namely How to Install the Applause Reaction Widget on Blogger, which many friends have asked for a tutorial, although this tutorial is very easy to apply.

By installing widgets like this, it turns out to have advantages, for example, to provide information on how good the quality of posts that we have published to visitors or website owners is. In addition, the information can be used as a payment benchmark for authors who are willing to write on their friend's blog.

One of the websites that install this reaction widget is Medium, which is a platform used to channel ideas in writing. Writers on this platform are of course paid according to the length of the reading, and the number of applause reactions.

If you are curious and want to make it too, please follow the following tutorial.

How to Install the Applause Reaction Widget

Keep in mind! before proceeding, it's a good idea to always do a backup first.

1. Please log in to the Blogger.com dashboard
2. Then select the Template menu > Edit HTML
3. Then copy the following CSS code, and place it immediately before the ]]></b:skin>or code</head>

   */ Applause Button Reaction */
   applause-button{position:relative;cursor:pointer}applause-button .style-root{position:absolute;top:0;left:0;right:0;bottom:0}applause-button .style-root:after{position:absolute;top:0;left:0;right:0;bottom:0;content:" ";display:block;border-radius:50%;border:1px solid}applause-button .style-root:hover:after:not(.clap-limit-exceeded){border-color:inherit}applause-button.loading{opacity:0.5}applause-button .shockwave{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%}applause-button svg{position:absolute;width:60%;height:60%;margin-left:20%;margin-top:20%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.8;stroke:none;overflow:visible !important}applause-button svg g.flat{visibility:hidden}applause-button svg g.outline{visibility:visible}applause-button.clapped svg g.flat{visibility:visible}applause-button.clapped svg g.outline{visibility:hidden}applause-button .count-container{position:absolute;top:-40%;width:100%;color:gray;user-select:none}applause-button .count-container .count{text-align:center}applause-button g.sparkle circle{opacity:0;stroke-width:0}applause-button g.sparkle g:nth-child(1){transform:rotate(0deg) translateX(10px)}applause-button g.sparkle g:nth-child(2){transform:rotate(72deg) translateX(10px)}applause-button g.sparkle g:nth-child(3){transform:rotate(144deg) translateX(10px)}applause-button g.sparkle g:nth-child(4){transform:rotate(216deg) translateX(10px)}applause-button g.sparkle g:nth-child(5){transform:rotate(288deg) translateX(10px)}applause-button:hover:not(.clapped) .shockwave{animation-name:shockwave;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in}applause-button.clap{animation-name:pulse;animation-duration:0.5s;animation-iteration-count:1}applause-button.clap .sparkle circle{animation-name:explode;animation-duration:0.5s;animation-iteration-count:1}applause-button.clap .count{animation-name:hideThenShow;animation-duration:0.5s;animation-iteration-count:1}@keyframes explode{0%{transform:translateX(10px);opacity:0}20%{opacity:1}50%{opacity:1}100%{opacity:0;transform:translateX(25px)}}@keyframes shockwave{0%{transform:scale(1);box-shadow:0 0 2px;opacity:1}100%{transform:scale(1);opacity:0;box-shadow:0 0 50px, inset 0 0 10px}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes hideThenShow{0%{opacity:1;transform:translateY(0)}20%{opacity:0;transform:translateY(-10px)}50%{transform:translateY(10px)}80%{transform:translateY(10px);opacity:0}100%{opacity:1;transform:translateY(0)}}

4. Also copy the following JS code, and place it immediately before the code </body>

   <script src='https://cdn.statically.io/gh/shofisetiawan/bangopit-applause-button/8ce883e7/bangopit-applause-button.js'></script>

5. Finally, place the following HTML code according to your wishes.

   <applause-button style='width:58px;height:58px;'/>

   Description: If you want to display below the post, then paste the code above in the class post body.
6. Save Template.
7. Done

If you do not understand what the admin has said, please ask through the comments field provided below this article. Make sure it's on a topic so we can respond to your questions as quickly as possible.

Maybe that's the first article from How to Create an Applause Reaction Widget on Blogger, hopefully it's useful. Thank you.