Earn More With Tech Tips Powered By Singh Tech (ST)
Home
How to Add All Social Media Floating Widget in Blogger

How to Add All Social Media Floating Buttons Widget in Blogger

How to Add Social Media Floating Widget in Blogger, HTML Code for Social Media Floating Widget
How to Add All Social Media Floating Buttons Widget in Blogger

How to Add All Social Media Floating Buttons Widget in Blogger

In today’s digital era, every blogger wants readers to instantly connect with their social media platforms like WhatsApp, Instagram, Facebook, YouTube, X (Twitter), LinkedIn, and Email. In this guide, you’ll get ready-to-paste HTML/CSS code, step-by-step instructions, and AdSense-friendly tips to give your blog a professional look.

What is a Floating Buttons Widget?

A floating widget is a fixed-position set of buttons that remain visible on the screen corner even when the reader scrolls. This ensures quick access to your social profiles, increases engagement, and adds a premium design feel.

Benefits

  • Instant Connect: Readers can reach your social profiles without searching.
  • AdSense Friendly: Non-intrusive placement, does not overlap ads.
  • Responsive: Works smoothly on both mobile and desktop.
  • Customizable: Colors, size, spacing, and position can be easily changed.

Step-by-Step Guide

Option A: Site-wide (via Theme)

  1. Open Blogger Dashboard → Theme → Edit HTML.
  2. Add Font Awesome CDN inside the <head> section.
  3. Paste the widget HTML just before </body>.
  4. Add CSS styling inside <head> or at the end of theme CSS.

Option B: Post-specific

  1. Open New Post → Switch to HTML view.
  2. Paste the widget block inside the post.
  3. Update links with your own handles, numbers, and email.

Ready-to-Paste Code

1) Font Awesome CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

2) Floating Widget HTML

<div class="st-floating-social">
  <a class="st-btn st-whatsapp" href="https://www.whatsapp.com/channel/0029VaAyPmi1t90deB55UQ36" target="_blank"><i class="fab fa-whatsapp"></i></a>
  <a class="st-btn st-instagram" href="https://instagram.com/yourhandle" target="_blank"><i class="fab fa-instagram"></i></a>
  <a class="st-btn st-facebook" href="https://www.facebook.com/people/Singh-Tech-ST/100094454162098/" target="_blank"><i class="fab fa-facebook-f"></i></a>
  <a class="st-btn st-youtube" href="https://youtube.com/@singhtechst" target="_blank"><i class="fab fa-youtube"></i></a>
  <a class="st-btn st-x" href="https://x.com/singhtechst" target="_blank"><i class="fab fa-x-twitter"></i></a>
  <a class="st-btn st-linkedin" href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin-in"></i></a>
  <a class="st-btn st-email" href="mailto:you@example.com"><i class="fa-regular fa-envelope"></i></a>
</div>

3) CSS Styling

<style>
.st-floating-social{
  position:fixed;bottom:20px;right:15px;
  display:flex;flex-direction:column;gap:10px;
  z-index:9999;
}
.st-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  transition:0.2s;
}
.st-btn:hover{transform:translateY(-2px);filter:brightness(1.1);}
.st-whatsapp{background:#25D366;}
.st-instagram{background:radial-gradient(circle at 30% 30%, #feda77, #dd2a7b 45%, #8134af 70%, #515bd4);}
.st-facebook{background:#1877F2;}
.st-youtube{background:#FF0000;}
.st-x{background:#111;}
.st-linkedin{background:#0A66C2;}
.st-email{background:#ff7e39;}
</style>

Customization & AdSense Safety

  • Update links with your own social handles.
  • Adjust bottom and right values to avoid overlapping ads.
  • Keep the widget non-intrusive and responsive.

Conclusion

This floating social media widget is a simple, responsive, and AdSense-friendly way to connect readers with your platforms. Just paste the code, update your links, and enjoy a professional look for your Blogger site.

Singh Tech (ST)