How to Add Social Media Icons to Blogger or WordPress Using HTML

on
 

Want to add eye-catching social media icons to your Blogger or any HTML-based website? Here's a ready-to-use HTML code with Font Awesome icons that you can just copy, paste, and customize for your own links.

Whether you're a blogger, developer, or digital creator — this neat and colorful layout gives a professional look to your site and makes it easy for visitors to find you on social media.


🌟 Why Add Social Media Icons to Your Blog?

Adding social media icons to your blog makes it easier for readers to:

  • Follow you across platforms
  • Share your content
  • Connect with you beyond your website

It’s a small change that boosts your blog’s reach and professional appearance.

✅ What’s Included in This HTML Code?

  • 💠 Facebook, X/Twitter, Instagram, and YouTube icons

  • 🎨 Pre-colored icons using brand colors

  • ⚡ Hover effects to make it interactive

  • 📱 Mobile responsive with viewport support

📌 How to Add Social Media Icons to Blogger:

  1. Go to your Blogger dashboard > Layout

  2. Click on "Add a Gadget" and choose "HTML/JavaScript"

  3. Paste the entire code into the content box

  4. Click Save and refresh your blog to see the icons live!

📌 How to Add Social Media Icons toWordPress:

  • Go to your WordPress Dashboard > Appearance > Widgets or Customize > Widgets

  • Add a Custom HTML block to your desired area (e.g., footer, sidebar)

  • Paste the entire HTML code (social media icons) into the block

  • Click Save to apply the changes

  • ✅ If you're using the Gutenberg editor, insert a Custom HTML block directly into a post or page

  • Click Preview to check how it looks, then Publish/Update your content

🧠 Pro Tip:

You can easily replace the links with your actual social media URLs, or add more icons by copying the <a> tag and changing the platform class like fa-linkedin, fa-pinterest, etc.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media Links</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    .social-links {
      display: flex;
      justify-content: center;
      gap: 25px;
      padding: 20px;
      background-color: #ffffff;
    }
    .social-links a {
      text-decoration: none;
      transition: transform 0.3s ease;
    }
    .social-links a:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="social-links">
    <a href="https://www.facebook.com/yourpage" target="_blank" aria-label="Facebook">
      <i class="fab fa-facebook" style="color: #3b5998; font-size: 30px;"></i>
    </a>
    <a href="https://x.com/yourprofile" target="_blank" aria-label="X (Twitter)">
      <i class="fab fa-x-twitter" style="color: #000000; font-size: 30px;"></i>
    </a>
    <a href="https://www.instagram.com/yourprofile" target="_blank" aria-label="Instagram">
      <i class="fab fa-instagram" style="color: #E4405F; font-size: 30px;"></i>
    </a>
    <a href="https://www.youtube.com/@yourchannel" target="_blank" aria-label="YouTube">
      <i class="fab fa-youtube" style="color: #FF0000; font-size: 30px;"></i>
    </a>
  </div>
</body>
</html>

🚀 Watch this step-by-step Tutorial to Add Social Media Icons to Blogger / WordPress 

Comments

Post a Comment