How to Add Floating Social Media Buttons in Blogger

1. What is a Floating Social Media Buttons Widget?

A Floating Social Media Widget is a fixed-position vertical bar of action buttons placed on the edge of your webpage (typically the bottom-right or middle-right corner). Unlike standard footer links that require users to scroll all the way down, a floating bar stays smoothly docked on the screen as the reader scrolls through your articles or uses your online tools.

Whether you run an educational portal, a CSC citizen information blog, or a tech utility platform like Singh Tech Hub, giving visitors one-click access to your WhatsApp Channel, YouTube Tutorials, and Support Email dramatically boosts audience trust and repeat traffic.

2. Key Benefits of Adding This Widget

• Instant Audience Connection: Readers can join your WhatsApp channel, subscribe to your YouTube channel, or send an email without searching through menus.
• 100% Pure CSS (Zero Page Slowdown): Unlike heavy third-party social sharing plugins that load external tracking scripts, this widget runs on pure HTML and CSS, keeping your Google PageSpeed score fast.
• Google AdSense & Cookie Banner Safe: Specifically engineered with smart bottom margins so it never overlaps with mobile anchor ads or your Cookie Consent Banner.
• Accessibility & SEO Optimized: Includes proper aria-label and rel="noopener noreferrer" attributes so search engines validate every link safely.

3. Step-by-Step Installation Guide in Blogger

You can install this floating widget across your entire Blogger website using two simple methods. Method A (Layout Gadget) is the safest and easiest for beginners.

Method A: Site-Wide via Blogger Layout (Recommended & Safe)

1. Log in to your Blogger Dashboard and select your blog.
2. From the left sidebar menu, click on Layout.
3. Scroll down to the Footer or Sidebar section and click on + Add a Gadget.
4. Select the HTML/JavaScript gadget from the popup list.
5. Leave the Title box blank (so no extra heading appears on your site).
6. Copy all three code blocks provided below (Font Awesome CDN + HTML + CSS) and paste them together into the Content box.
7. Click Save and refresh your blog to see the live floating buttons!

Method B: Site-Wide via Theme Edit HTML (For Advanced Users)

1. Go to Blogger Dashboard → Theme, click the arrow next to Customize, and select Backup first (always save a backup of your XML theme before editing).
2. Click Edit HTML and press Ctrl + F inside the code editor.
3. Search for </head> and paste the Font Awesome CDN and CSS Styling just above it.
4. Next, search for </body> at the very bottom of your theme and paste the Floating Widget HTML just above </body>, then click the Save icon.

4. Ready-to-Paste HTML & CSS Codes

Click the Copy Code button on each box below to copy the exact snippet without any typing errors:

Step 1: Font Awesome 6 Icon CDN

If your Blogger template does not already include Font Awesome 6 icons, add this single line at the top of your widget:

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

Step 2: Floating Social Media Widget HTML

Replace the sample profile URLs and email address below with your own official links before saving:

<div class="st-floating-social" aria-label="Social Media Links">
  <a class="st-btn st-whatsapp" href="https://www.whatsapp.com/channel/0029VaAyPmi1t90deB55UQ36" target="_blank" rel="noopener noreferrer" aria-label="Join WhatsApp Channel" title="Join WhatsApp Channel"><i class="fab fa-whatsapp"></i></a>
  <a class="st-btn st-instagram" href="https://instagram.com/yourhandle" target="_blank" rel="noopener noreferrer" aria-label="Follow on Instagram" title="Follow on Instagram"><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" rel="noopener noreferrer" aria-label="Follow on Facebook" title="Follow on Facebook"><i class="fab fa-facebook-f"></i></a>
  <a class="st-btn st-youtube" href="https://youtube.com/@singhtechst" target="_blank" rel="noopener noreferrer" aria-label="Subscribe on YouTube" title="Subscribe on YouTube"><i class="fab fa-youtube"></i></a>
  <a class="st-btn st-x" href="https://x.com/singhtechst" target="_blank" rel="noopener noreferrer" aria-label="Follow on X" title="Follow on X (Twitter)"><i class="fab fa-x-twitter"></i></a>
  <a class="st-btn st-linkedin" href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" aria-label="Connect on LinkedIn" title="Connect on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
  <a class="st-btn st-email" href="mailto:singhtechst.official@gmail.com" aria-label="Send Email" title="Email Support"><i class="fa-regular fa-envelope"></i></a>
</div>

Step 3: Responsive & AdSense-Safe CSS Styling

This upgraded CSS automatically adjusts button size on mobile screens and leaves safe clearance at the bottom so it never blocks cookie banners or footer ads:

<style>
.st-floating-social {
  position: fixed;
  bottom: 85px; /* Safe clearance above Cookie Banner & Anchor Ads */
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 9990;
}
.st-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.st-btn:hover {
  transform: translateY(-2px) scale(1.05);
  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: #111111; }
.st-linkedin { background: #0A66C2; }
.st-email { background: #ff7e39; }

/* Mobile Optimization */
@media (max-width: 600px) {
  .st-floating-social {
    bottom: 90px;
    right: 10px;
    gap: 7px;
  }
  .st-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}
</style>

5. How to Customize Links, Colors & Screen Position

You can easily tailor this widget to match your blog’s exact layout using the reference table below:

6. Google AdSense Policy & Layout Safety Checklist

To keep your blog 100% compliant with Google Publisher Policies:

• Maintain Safe Bottom Spacing: Keep bottom: 85px; or higher so the floating icons never overlap bottom anchor ads or back-to-top buttons.
• Limit the Number of Icons on Mobile: Having 4 to 6 essential buttons ensures the vertical bar does not cover your main article text on smaller smartphone screens.
• Use target="_blank" Safely: Opening external social profiles in a new tab keeps readers on your blog longer and reduces bounce rate.

7. Frequently Asked Questions (FAQs)

8. Conclusion

Adding an All-in-One Social Media Floating Buttons Widget is one of the smartest, simplest, and most effective ways to give your Blogger site a professional upgrade while growing your community across WhatsApp, YouTube, Facebook, and Instagram. Because this widget uses clean HTML and pure CSS, your website stays fast, mobile-responsive, and 100% compliant with Google AdSense layout guidelines.

Simply copy the code snippets above, replace the sample handles with your own profile links, and paste them into a Blogger Layout gadget. If you face any issues while installing or customizing the code, feel free to reach out to us via our Contact Us page or explore more tutorials and daily utilities on Singh Tech Hub!

9. Disclaimer