How to add emoji Reaction Bar in Blogger with Lazy Load

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have emoji reaction bar in their posts which automatically appears on every post and collects data of rating.

Nowadays the star rating feature that was from the Widget Pack is currently unavailable now and bloggers are now looking for an alternatives for it .This time I came up with emoji reaction bar where readers can react through emoji's to express their satisfaction with the articles or tutorials .It also uses lazy load that will probably not effect your page speed.

Basically, by adding emoji reaction bar to your articles on Blogger, will increase Google organic traffic as well as traffic from that of other search engines. Because using such widgets is a very important method in getting good ranking in search engines, where blog articles will be easily visible to others, which will attract more visitors to click on our posts.So today we will learn in this blog add emoji reaction bar in Blogger using lazy load.

Steps – How to create it 

• Open Blogger Dashboard
• Next you can click on your Themes option and then the Three Dots option and then the "Edit html" option.
• Next, when you click on the "Ctrl + F" option on your laptop keyboard, a search bar will open.
• Then , Paste the CSS code given above this ]]></b:skin> tag.

.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}

• Next, find this comment:"<!--[ Post body ]-->" and paste the html code given below just after this: "<data:post.body/>".

<b:if cond='data:view.isPost'>

<div class='sharethis-inline-reaction-buttons'/>

</b:if>

• Then paste the given javascript code above <!--[ </body> close ]-->

<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=63407eb5c2af2800193d4dbc&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 

/*]]>*/</script>

• Don't forget saving your template !

Note: We highly recommend replacing the above highlighted property ID code 63407eb5c2af2800193d4dbc part , change this part by signing up at ShareThis .Once your account gets verified you will get your own ID.By Doing So , you'll be able to have control over these ratings.

Congratulation✨🎉🎊🥳🥳 you have successfully completed implementation of tutorial.

Conclusion

So today we have discussed about How to add emoji Reaction Bar in Blogger with Lazy Load . I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me.Do visit regularly for getting more updates like this.