How To Add Stylish Social Media Icons In Blogger.

Hello There Friend!.

Hope You Are Fine, Today I Am Going To Tell You How To Add Stylish Social Media Icons In Blogger Template, So Lets Get Started. First Of All We Need To Know Why Is It Necessary To Add Social Media Icons To  Blogger.

Why Is It Necessary To Add Social Media Icons To Blogger?

Social Media Icons Help The Users To Connect To You On The Social Media Easily,Any Uer Can Easily Tell His Or Her Problem On ANy Social Platform Insteed On Telling It Into Contact Us Form. It Not Just Assists With Building Your Presence Outside Your Blog In Virtual Entertainment Destinations, Yet Additionally Bring New Guests From Those Person To Person Communication Locales. The Most Effective Way To Get Your Perusers To Follow Via Online Entertainment Destinations Is To Show Virtual Entertainment Symbols Connecting To Your Profile.

How To Add Stylish Social Media Icons To Blogger?

To Add Stylish Social Media Icons To Your Blog, Follow The Given Steps One By One:

• First Of All Go To Your Blogger Account.
• Go To The Layout Section Of The Blogger.
• Click On Add A Gadget At The Place You Want To Add Your Social Media Icons.
• After The Popup Select The HTML Javascript.
• Add Your Title As Social Media Or Follow Us.
• Now Copy The Code Below And Paste It In That Widget.

HTML

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

Save The Gadget And See The Magic.

Replace link-facebook All Others With Your Own Social Media Links.

If The Gadget Did Not Worked Correctly, It Means That Font Awesome Is Not Installed In Your Theme. To Resolve This Add The Following Code Just Above The </body> Tag In Your Blogger HTML Template.

JS

<script type='text/javascript'>
      //<![CDATA[
      function loadCSS(e, t, n) { 
        "use strict";
        var i = window.document.createElement("link");
        var o = t || window.document.getElementsByTagName("script")[0];
        i.rel = "stylesheet";
        i.href = e; i.media = "only x";
        o.parentNode.insertBefore(i, o);
        setTimeout(function () { i.media = n || "all" })
      }
      loadCSS("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");
      loadCSS("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
      loadCSS("ADD CSS STORED LINK");
      loadCSS("ADD CSS STORED LINK");
      //]]>
    </script>

Hope It Had Worked. It Seemed Much Fun Telling You How To Add Socail Media Icons To Blogger. If You Still Have Any Issue Or Any Problem Regarding Adding The Social Media Icon, Please Tell Me In The Comment Box I Will Fully Try To Resolve It.