How to Add Sticky Floating Share Buttons in Blogger (2025 Version)

How to Add Sticky Floating Share Buttons in Blogger (2025 Version) 

Learn how to add floating social share buttons that stick as users scroll through your Blogger posts. Boost traffic and engagement with this 2025 guide — easy, stylish, and no plugins required!

Why Floating Share Buttons Matter

Sticky floating buttons appear on the side of your screen as users scroll. They let visitors instantly share your posts on platforms like:

• Facebook
• WhatsApp
• Twitter (X)
• LinkedIn
• Pinterest

Benefits of Floating Share Buttons

Feature	Impact
Easy to share	Boosts post visibility
Mobile-responsive	Works on all devices
Always visible	Higher chance of being clicked
Looks professional	Adds credibility and encourages engagement

---

How to Add Sticky Floating Share Buttons in Blogger

Step 1: Go to Blogger → Theme → Edit HTML

Step 2: Add This CSS Code Before </head>

Search for </head> and paste this above it:

<style>
.floating-share {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 999;
}
.floating-share a {
  display: block;
  background: #007bff;
  color: #fff;
  text-align: center;
  padding: 10px 12px;
  margin: 5px 0;
  border-radius: 0 5px 5px 0;
  transition: background 0.3s;
  font-size: 16px;
}
.floating-share a:hover {
  background: #0056b3;
}
@media only screen and (max-width: 768px) {
  .floating-share {
    display: none;
  }
}
</style>

Step 3: Add HTML for Share Buttons Before </body>

Paste this just before </body> in your theme:

<div class="floating-share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=<data:post.url/>" target="_blank" title="Share on Facebook">F</a>
  <a href="https://twitter.com/share?url=<data:post.url/>&text=<data:post.title/>" target="_blank" title="Share on Twitter">X</a>
  <a href="https://wa.me/?text=<data:post.title/>%20<data:post.url/>" target="_blank" title="Share on WhatsApp">WA</a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url=<data:post.url/>" target="_blank" title="Share on LinkedIn">In</a>
</div>

Tip: You can replace the text F, X, WA, In with SVG icons or emojis like 🔗, 📤, etc. for visual appeal.

 

Mobile Optimization Tip

This code hides the floating bar on small screens to avoid overlapping content. You can adjust it or add a floating bottom bar for mobile in future topics.

Pro Tips

Tip	Why It Helps
✅ Use platform brand colors	Helps users recognize the networks
✅ Position to the left	Doesn’t block content on desktop
✅ Show on popular posts	Higher chance of viral sharing

---

Common Mistakes and Fixes

Mistake	Fix
❌ Buttons not visible	✅ Paste code in correct theme locations
❌ Overlapping on mobile	✅ CSS hides them on small screens
❌ Broken links	✅ Make sure <data:post.url/> works properly

---

Adding sticky share buttons makes it:

• Easy for readers to share your content
• More likely for your posts to go viral
• Looks polished and modern
• Helps grow your audience from every blog visit

Related Posts:

Previous article

Next Post

Next article

Previous Post

Suleiman Inuwa

https://www.androidpols.com.ng/

I am a professional website developer and also an SEO expert.