How To Add Social Media Subscribe Widget in Blogger Post

How To Add Social Media Subscribe Widget in Blogger Post

Hello Everybody, Today in this post i will share How To Add Social Media Subscribe Widget in Blogger Post. in nowdays Modern Blogger Templates Designer gives Social Media Subscribe widget in their Templates but if you want to add Social Media Subscribe Buttons on Blogger Post. then read this post with carefully.

This time the widget is very responsive and colorful, light and fast loading, so it won't slow down your blog loading and this time it is applied to the bottom area of the blogger post. So visitors can subscribe to your social media if your blog is considered useful and good.

This social media widget is full of stunning colors and looks as cool and well-designed as possible. This Social Subscribe Widget uses latest font awesome icons.

Well, if you are interested in installing it, you can follow the installation steps below and I suggest following the steps carefully so that no errors occur during installation later.

How to Create Social Media Subscribe Widget in Blogger Posts

Step 1 :- First of all you need Go To Blogger.Com.

Step 2 :- Then Login to Your Blogger Account.

Step 3 :- Then Click on Theme Menu.

Step 4 :- After this Click on Edit Html.

Step 5 :- Then Copy Css code provided Below and Place Above the Code ]]></b:skin>.


.techyjeeshan{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: 350px;
  position: relative;
   box-shadow:
    inset 2px 2px 2px 0px rgba(255,255,255,.3),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.1);;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
   border-radius: 10px;
}

.btn{
  height: 35px;
  width: 35px;
  border-radius: 3px;
  background: #e0e5ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
   inset 2px 2px 2px 0px rgba(255,255,255,.3),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.1);
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}
.btn:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

Then copy the code provided below put this html where you want to display the Social Media Subscribe Widget, if you want to put it under the post then you can put it under the code usually this code has more than 1, depending on the template you are using, just look for the one are in post-entry or postEntry if you don't know just try 1 by 1.


<div class ="techyjeeshan">
    <a href="#" class="btn" style="background: #3b5998;">
 <i class="fab fa-facebook-f"></i>
</a>
    <a href="#" class="btn" style="background: #00acee;">
  <i class="fab fa-twitter"></i>
</a>
    <a href="#" class="btn" style="background: #ea4c89;">
 <i class="fab fa-dribbble"></i>
</a>
    <a href="#" class="btn" style="background:#0e76a8;">
 <i class="fab fa-linkedin-in"></i>
</a>
    <a href="#" class="btn" style="background:#ee4056;">
 <i class="fab fa-get-pocket"></i>
</a>
    <a href="#" class="btn" style="background:rgba(42, 52, 84, 1);">
 <i class="far fa-envelope"></i>
</a>
</div>

Buddy, replace " # " with your friends' social media links such as Facebook, Twitter, RSS or Youtube.

Step 6 :- this is the very imp step because in this step i will tell you how to install font awesome icons in theme. if any font awesome is not install in your theme then copy the code provided below and paste it above the <head> tag.


<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

And the last step is to save the template.

Conclusion

I hope you liked this post a lot. This is a best tutorial on How To Add Social Media Subscribe Widget in Blogger Post. if you have face any error and problem you can ask in the comment section without any hesitate. Thanks For Reading This Post.