Adding Social Media Icon Widget for Blogger

Hello Blogger's how are you. I hope you are doing good and great. Social widgets is a very effective way to connect with your followers and blog visitors to interact.

So today we are going to Add Social Media Icon Widget for Blogger. This icon is made is up of CSS so it will not effect your blog speed.

You will get here Facebook, Twitter, YouTube, GitHub and linkedin. The icons of the widget looks fabulous to see.

Demo

So let's start the installation process.

Before starting the process please backup your blog template for any kind of error and easy restoration.

Adding Social Media Icon Widget

Below are the given steps and it is very easy as you have to only codes into layout mode in widget.

Steps

1. Login to your Blogger dashboard.
2. Go to Layout section.
3. Now click on Add a Gadget where you want to add this widget.
4. After a popup select HTML/JavaScript.
5. Now give a title to the widget like Social Media or Follow Us.
6. Now copy the below given codes and paste it in the content section.

<style>
    *{box-sizing:border-box}*:focus,*:active{outline:none!important;-webkit-tap-highlight-color:transparent}.wrapper{display:flex;justify-content: center;}.wrapper .icon-container{position:relative;width:50px;height:50px;background-color:#ffffff;color:#121212;display:flex;align-items:center;justify-content:center;margin:0 10px;border-radius:30%;box-shadow:0 5px 15px -5px rgb(0 0 0 / 10%);cursor:pointer;font-size:25px;text-decoration:none;opacity:0.99;overflow:hidden}.wrapper .icon-container::before{content:"";width:120%;height:120%;position:absolute;top:90%;left:-110%;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:all 0.35s;transition-timing-function:cubic-bezier(0.31,-0.105,0.43,1.59);z-index:1}.wrapper .icon-container .icons{-webkit-transform:scale(0.8);transform:scale(0.8);transition:all 0.35s;transition-timing-function:cubic-bezier(0.31,-0.105,0.43,1.59);z-index:2}.wrapper .icon-container.facebook{color:#3b5998}.wrapper .icon-container.twitter{color:#5da9dd}.wrapper .icon-container.youtube{color:#fe0108}.wrapper .icon-container.github{color:#1b1f23}.wrapper .icon-container.linkedin{color:#0077b5}.wrapper .icon-container:hover .icons{color:#ffffff;-webkit-transform:scale(1);transform:scale(1)}.wrapper .icon-container:hover::before{top:-10%;left:-10%}.wrapper .icon-container.facebook:hover::before{background-color:#3b5998}.wrapper .icon-container.twitter:hover::before{background-color:#5da9dd}.wrapper .icon-container.youtube:hover::before{background-color:#fe0108}.wrapper .icon-container.github:hover::before{background-color:#1b1f23}.wrapper .icon-container.linkedin:hover::before{background-color:#0077b5}
</style>
<div class="wrapper">
  <a href="link-facebook" target="blank" class="icon-container facebook">
    <i class="icons fab fa-facebook-f"></i>
  </a>
  <a href="link-twitter" target="blank" class="icon-container twitter">
    <i class="icons fab fa-twitter"></i>
  </a>
  <a href="link-youtube" target="blank" class="icon-container youtube">
    <i class="icons fab fa-youtube"></i>
  </a>
  <a href="link-github" target="blank" class="icon-container github">
    <i class="icons fab fa-github"></i>
  </a>
  <a href="link-linkedin" target="blank" class="icon-container linkedin">
    <i class="icons fab fa-linkedin-in"></i>
  </a>
</div>

Now click on save.

You can move the widget as per your requirements.

Demo Here Below :

So after following the above steps I hope you have successfully installed Social Media Icon Widget on your blog successfully. If you have got any error kindly contact us.

Conclusion

So today we have talked about How to Add Social Media Icon Widget for your Blogger Blog. If you got any questions kindly comment below and do like and follow our blog for more content like this.

Reference:
https://www.phamvanlinh.xyz