Home
Blogger

How to add Reaction Bar in Blogger (Lazy Load)

2

Hello everyone welcome to Shiva Technic World, nowadays the old article star rating feature that's from the Widget Pack is down and if you are looking for an alternative one then this tutorial is for you, this time it's not star rating instead of it, the users can react in through emoji that with the help of ShareThis that was alternative like WhatsApp, Telegram like reaction feature, It also lazy load that helps to non-effect your page speed like it will maintain your page default speed, Then without wasting much time let's check how to add reaction bar in Blogger that with lazy load.

How to add Reaction Bar in Blogger (Lazy Load)?

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!

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can 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}.drK #st-1 .st-btn > span {color: #fff}

  • Then find <data:post.body/> and paste the following HTML code just below it

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

  • Then find <body/> and paste the following JS just above it

    • <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>

    We recommend replacing highlighted property id number with your ShareThis reaction property id that gets with the ShareThis default script


  • Then Save HTML

    • Want to see how it looks?


    Demo


    Conclusion


    Hope this How to add Reaction Bar in Blogger (Lazy Load) tutorial will be useful to you, if facing any problems or doubts related to this article ask me in the comment, and do share with your friends, Thanks for visiting, Have a nice day!