How To Add Stylish Social Media Icons On Blogger.

In This Post I Am Going To Show You How To Add Stylish Social Media Icons On Blogger. We Will Add Social Media Icons Through A Step By Step Process. We Will Also Know The Importance Of Social Media Icons In Blogger Website. One Must Follow All The Steps In A Sequence To Add Stylish Social Media Icons On Blogger.

Importance Of Social Media Icons On Blogger Website:

Social Media Icons Play Several Important Roles On A Blogger Website:

  1. Increase Social Media Engagement: Social Media Icons Make It Easy For Visitors To Connect With Your Brand Across Various Social Platforms. When Users Find Your Content Interesting, They Can Easily Follow You On Platforms Like Facebook, Twitter, Instagram, Etc. Expanding Your Reach And Increasing Engagement.
  2. Drive Traffic: By Incorporating Social Media Icons, You Provide Visitors With Quick Access To Share Your Content On Their Social Networks. This Can Lead To Increased Traffic To Your Blog As Followers Share Your Posts With Their Networks, Potentially Reaching A Broader Audience.
  3. Build Brand Visibility: Consistent Use Of Social Media Icons Across Your Blog And Social Media Platforms Reinforces Your Brand Identity. Users Who See Your Branded Icons On Your Blog Are More Likely To Recognize And Remember Your Brand. Which Can Lead To Increased Brand Visibility And Recognition.
  4. SEO Benefits: Social Media Activity Can Indirectly Impact Your Blog’s Search Engine Optimization (SEO) Efforts. When Your Content Is Shared On Social Media Platforms, It Increases Its Visibility And Can Lead To More Backlinks, Which Are A Key Factor In Search Engine Rankings.

Overall, Social Media Icons Are Essential Elements Of A Blogger Website As They Facilitate Social Engagement, Drive Traffic, Strengthen Brand Identity, Improve User Experience, And Contribute To SEO Efforts.

How To Add Stylish Social Media Icons On Blogger.

Follow The Below Steps One To Add Stylish Social Media Icons On Blogger, Make Sure To Follow The Steps In Sequence And Change The Required Data:

  • Step 1: First Of All Go To The Blogger Dashboard And Login Into Your Blog.
  • Step 2: Now Go To The Layout Section And Click On Add A New Gadget Where You Want To Place Your Social Media Icons.
  • Step 3: Now Paste The Below HTML Code In Content Section Of The Gadget.
<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>

Change The Details With Your Own:

  1. link-twitter With Your Twitter Profile Link
  2. link-youtube With Your YouTube Channel Link.
  3. link-github With Your GitHub Profile Link.
  4. link-linkedin With Your LinkedIn Profile Link.
  5. link-facebook With Your Facebook Profile Link.
  • Step 4: Click On Save Button And Go To The Themes Section.
  • Step 5: Click On The Customize And Edit HTML.
  • Step 6: Now Scroll Down To The  </body> Tag And Add The JS Code Above The </body> Tag.
<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>
  • Step 7: Click On The Save And Publish Button And See The Magic.

We Have Successfully Added A Stylish Social Media Icons On Our Blogger Website. If You Find Any Difficulty While Adding A Stylish WhatsApp Chat Button On Your Blogger Website. You Can Comment In The Section Below.

Conclusion:

Social Media Icons Help The Users To Connect To You On The Social Media Easily. Any User Can Easily Tell His Or Her Problem On Any Social Platform Instead On Telling It Into Contact Us Form. It Not Just Assists With Building Your Presence Outside Your Blog In Virtual Entertainment Destinations.

How Do I Put Social Media Icons On My Blogger Website?

Adding Social Media Icons To Your Blogger Site Is Pretty Simple. You Can Either Find A Special Tool Online, Like A Widget Or Plugin, That Lets You Add These Icons With Just A Few Clicks. Or, If You Know A Bit Of Coding, You Can Create And Add Them Yourself Using HTML And CSS.

Where Should I Put The Social Media Icons On My Blogger Site?

Think About Where People Usually Look On Your Site. Most Folks Like To Put Them At The Top (The Header), Bottom (The Footer), On The Side (The Sidebar), Or In A Special Section Just For Social Media (Like A “Follow” Section). You Want To Put Them Where Visitors Can Easily See And Click On Them

Is It Necessary To Add Social Media Icons In your Blogger Website?

Yes, One Must Add The Social Media Icons In The Blogger To Look Good And For The AdSense Approval.

Dive Into The World Of Tech With Me.

1 thought on “How To Add Stylish Social Media Icons On Blogger.”

Leave a comment