How to Add Custom Material Design Box In Your Blog

By adding emoji reaction widgets to your posts in blogger, you can increase your organic traffic. Google and from where you bring traffic to your website through any other means and through search engines

Hello bloggers, hope you all are fine. Many of you must have noticed that emoji widgets are kept inside the posts of many blogs. These emoji widgets come automatically in all the posts and within every post and article, they start collecting the data of how many people have rated the emoji widgets.

I will tell you how you can add emoji reaction widgets to your blogger website through this article. You will get to see this emoji reaction bar, scrolling below the article as a demo.

You Have to Know

You should know that you get installed plugins in WordPress, if we talk about Blogger, we do not get such pre-installed plugins in Blogger. Like, Wp Star Ratings and kk Star Rating. Blogger is run by Google, so such a service is not provided in Blogger that we can somehow add star rating features to Blogger, for this if we want to add rating widget to Blogger's website, then we have to go there third-Party website has to be used. Because it does not come precluded in Blogger.

What is Emoji Rating widgets

However, the features which are star rating widgets are no longer available, so for this we have to find an alternative to setup on Blogger. So today I have come with emoji reaction bar, where readers can express their feelings through these tutorials, and articles using emojis, lazy load has also been used here. Which will not allow your website to slow down.

If you put emoji reaction widgets in your blogger article, then it increases your organic Google traffic and from where you are bringing traffic to your website, it increases your traffic from any other search engine. Because it is very important to use this type of widget, this is because it becomes a part of good ranking on the search engine, so users and people will be able to see your post easily. Which increases the chances of many people clicking on it. So, today in this blog we will learn how we can use lazy load emoji reaction bar in blogger website.

Uses of the emoji reaction button

These emoji widgets on your article and blog greatly impress your reader and user, and also come in handy in a fun way. It is very easy to install and add, it fits in the screen of any device and appears accordingly. You will find this type of emoji widgets reaction in many websites, I have also installed it in my website, and it looks very beautiful and attractive. You can apply these six types of emoji reaction buttons.

• Like    
• Love    
• LOL    
• WOW    
• SAD    
• Angry    

One of the best thing about this is that with its help we can easily apply emoji reaction button. That too easily in a few clicks.

Our main motive is to make sharing emoji reaction widgets easier for our visitors who take the time to read and read our articles. We are sharing our thoughts with our readers, with the help of which they can easily take advantage of these widgets by clicking on this share button.

Benefits of Emoji Reaction button in blogger website

We have seen that many people forget to comment after reading the post or do not comment at all, and sometimes do not do it because they think that their time will go too much. So, today we will make it easy by adding emoji reaction widgets to blogger website. And you will be able to see their thoughts, with the help of emoji widgets, you will make it very easy by putting them in your posts and articles.

By installing emoji reaction widgets, we will also be able to know that our readers, how they feel about our post and its quality.

You can see the search result by installing this emoji reaction widgets in blogger's website and by turning on google snippet mode.

You have to take backup of your theme before doing this step so that if there is any issue or mistake, we can solve it with the help of backup theme.

How to use Emoji Reaction widgets in Blogger

In today's article, I will tell you how you can apply the share this reaction button in your blogger's theme. Because students and many people like to use Blogger and Google's platform. Because we are able to use it. If you want to put share this reaction widgets in your blpgger, follow all the steps correctly. If you want to put emoji reaction widgets in your blog posts that appear in Google, you can do it in any blog if you want to put it. You have to read the article correctly, and follow all the steps correctly.

1:- First you have to come to blogger.com.

2:- First of all you have to go to blogger's dashboard.

3: - Now you will get to see a "Theme" section in the blogger dashboard below. And you have to come on it and by clicking on customize you have to come to the edit HTML option.

4:- Now you have to search by pressing Ctrl+f </head> tag in theme html.

5: - I have given you a Css code below, you have to copy it and paste it before the </head> tag.

      <style>
/* Emoji reaction Widget by Tech Shreyansh */
.sharethis-inline-reaction-buttons{display:flex;max-width:100%;padding:10px 17px;line-height:25px;background:var(--headerB);border-radius:11px;box-shadow:2px 4px 11px #c0c0c0, -2px -4px 11px #fff;font-size:16px;font-family:inherit;color:#08102b;text-align:center}.drK .sharethis-inline-reaction-buttons{box-shadow:2px 4px 11px #1f1f1f, -2px -4px 11px #000; background:#2d2d30}
@media screen and (min-width:360px){
.sharethis-inline-reaction-buttons{display:block;padding:0;font-size:13px}}
</style>
  

6: - Now you have to come to the Share This website and create your account.

7:-  Now you have to come to the website tools.

8:-  Now you have to add your domain name.

9:-  Now you have to select the reaction button.

10:-  After clicking on the react button you will get some code.

11:-  You just have to copy the Property code, {as I have shown in the photo above} you have to paste this property code anywhere in notepad or in excel.

12:-  After pasting the property code, you have to copy the JavaScript code given below, after that you have to paste it above the </body> tag.

      <script>/*<![CDATA[*//* ShareThis (LazyLoad) by Tech Shreyansh */ 
  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=6472041a58d85b001927bbf8&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 
/*]]>*/</script>
  

You have to replace a mark which I have given in the property code with your property code. Whatever property code I have given above, you have to chase it from your person.

Now you have to search <data:post.body/> tag in your theme HTML, you have to paste it below and it will appear in 2 or 3 places in your theme, wherever you see it, add it. This code is at the bottom of <data:post.body/>.

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

14:- Now you have to click on save on save to theme section.

Last Thing

I think this post How to Add Emoji Reaction Widgets in Blogger will be helpful for you. If you want more information like this, then definitely follow us on Telegram channel. For Latest Updates |

I think you might have liked this article, the way we add emoji reaction widgets in blogger, if you face any kind of problem in this tutorial, then comment and tell us.

© Tech Shreyansh

Go to Link