How To Add Social Media Sharing Buttons To Blogger

Hi Friends In this article I will Guide you to Add social media sharing buttons to blogger.

Do you want to add social media share buttons to your BlogSpot blog but don't know how? Don't be worried! This article will assist you.

Without a question, one of the most popular sources for sharing your content is social media. Twitter, Facebook is extremely popular these days, and its popularity is growing all the time.

The Advantages of Using Social Share Buttons

Increase Audience
Increase SEO
Increase Backlinks
Gain Traffic

Add Social Media Sharing Widget To Blogger

Open Blogger
Go to blogger theme
Click on Edit Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="social-icons-container">
      <a href="#">
        <div class="icon">
          <i class="fab fa-facebook-square"></i>
        </div>

        <div class="name">Facebook</div>
      </a>

      <a href="#">
        <div class="icon">
          <i class="fab fa-twitter-square"></i>
        </div>

        <div class="name">Twitter</div>
      </a>

      <a href="#">
        <div class="icon">
          <i class="fab fa-instagram-square"></i>
        </div>

        <div class="name">Instagram</div>
      </a>

      <a href="#">
        <div class="icon">
          <i class="fab fa-youtube-square"></i>
        </div>

        <div class="name">YouTube</div>
      </a>
    </div>
  </body>
</html>

Copy The above Html code
and paste it above </body>

.social-icons-container {
  display: flex;
  gap: 30px;
  font-family: "Roboto", sans-serif;
  margin: 32px 0;
  justify-content: center;
}

.social-icons-container a {
  display: flex;
  gap: 8px;
  font-size: 42px;
  text-decoration: none;
  align-items: center;
  width: 38px;
  height: 38px;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2);
  transition: all 400ms ease;
}

.social-icons-container a:hover {
  width: 138px;
}

.social-icons-container a .name {
  font-size: 16px;
  font-weight: bold;
}

.social-icons-container a:nth-of-type(1) {
  color: #4267b2;
}

.social-icons-container a:nth-of-type(2) {
  color: #1da1f2;
}

.social-icons-container a:nth-of-type(3) {
  color: #e1306c;
}

.social-icons-container a:nth-of-type(4) {
  color: #ff0000;
}

copy the above CSS code
and paste it above ]]></b:skin>
save the theme

Hope this article helps you, please share this for more people

How To Add Social Media Sharing Buttons To Blogger

Hi Friends In this article I will Guide you to Add social media sharing buttons to blogger.

The Advantages of Using Social Share Buttons

Increase Audience
Increase SEO
Increase Backlinks
Gain Traffic

Add Social Media Sharing Widget To Blogger

Post a Comment

Hot Posts

Labels

Search This Blog

Most Recent

Review of GOVO GOSURROUND 975: Elevate Your Audio Experience with True Dolby Atmos®

How to Use Social Media to Promote Your Website Traffic

The Importance of Choosing the Right Domain

How to Add WhatsApp Chat Widget in Blogger Blog

Ultimate Smartphone Showdown: Apple iPhone 15 vs OnePlus 12

About

#buttons=(Accept !) #days=(20)

Contact form

How To Add Social Media Sharing Buttons To Blogger

Hi Friends In this article I will Guide you to Add social media sharing buttons to blogger.

The Advantages of Using Social Share Buttons

Increase AudienceIncrease SEO Increase BacklinksGain Traffic

Add Social Media Sharing Widget To Blogger

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form

Increase Audience
Increase SEO
Increase Backlinks
Gain Traffic