How to Add Reaction Bar in Blogger

 

Hi to all in this article I am going to tell you all about how to add reaction are in blogger websites with lazy load easily in just few minutes.

Here users an react through emoji's, with the help of share this which is an alternative for WhatsApp, telegram like reactions and it is also lazy loaded that helps to non effect of your webpage speed.

If you add this feature in your blogger website, it provides good user interaction and your website visitors will click on it and can express their feelings about your article based on emoji's.

So, read the below provided steps carefully and completely to get clear understanding about adding reaction bar in blogger website without any issue or error.

Steps to Add Reaction bar in blogger Website

---

Login to Blogger Website

First of all you need to visit official website of blogger.

Now you need to login to your blogger website dashboard by using your login credentials.

Backup Blogger Theme

After successful login to your blogger website dashboard, you need to backup your website theme code, if you get any error or issue while saving the code in your theme editor then this backup will help you to restore again and can run your blogger website as usual.

If you want to backup your blogger theme code then you need to follow the below provided path.

Blogger website dashboard -> Click on theme -> Click on arrow icon -> Select backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your blogger theme, now you need to open blogger theme editor to add the codes inside it.

To open blogger theme editor you need to follow below provided path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor section.

Adding HTML Code

After you open blogger theme editor, you need to press CTRL+F to search the tags and now you need to find <data:post.body/> and press enter button in keyboard to search.

Now you need to copy below provided HTML code and paste the copied HTML code just below <data:post.body/> tag.

<b:if cond='data:view.isPost'>
<div class='sharethis-inline-reaction-buttons'/>
</b:if>

Adding CSS Code

Now you need to copy below provided CSS code and paste the copied CSS code just above ]]></b:skin> or paste it above <head/> tag by adding <style></style>.

.sharethis-inline-reaction-buttons{display:flex;max-width:400px;padding:10px 17px;line-height:25px;background:#fffdfc;border-radius:5px;box-shadow:0 10px 25px -3px rgba(0,0,0,.1);font-size:16px;font-family:inherit;color:#08102b;text-align:center}
.drK .sharethis-inline-reaction-buttons{box-shadow:none; background:#2d2d30}

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.

<script>
/*<![CDATA[*//* ShareThis (LazyLoad) */ var lazyReact = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyReact === false) || (document.body.scrollTop != 0 && lazyReact === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('type','text/javascript'); ad.async = true; ad.src = 'https://platform-api.sharethis.com/js/sharethis.js#property=6100ee7d3b1d5d001213a440&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 
/*]]>*/
</script>

Saving the Theme Code

After the three codes successfully, now you need to click on save button.

Now it will take few seconds to process the entire code and after successful processing of your entire code it will show a message i.e. Updated Successfully.

Now you can visit any one post from your website to check whether the code is working properly or not.

Note

---

If you get any error while saving the code then you need to restore your backup code and then you need to repeat the same process as provided in the above steps carefully.

If you want to change the style and colors for the reaction bar then you need to modify CSS code.

For changing colors, you need to replace the color codes inside CSS and for color codes you can use google color picker or any other third part color picker websites.

Place the three codes in the correct place as mentioned in the above provided steps carefully, if you mistakenly add the codes in different place then the code will not work properly.

Conclusion

---

I hope that you have understood about adding reaction bar in blogger website with lazy load easily in just few minutes by using HTML, CSS and JavaScript.

If you have doubts related to the article then you can contact us through contact page and do share with your friends, Thanks for visiting, have a nice day!