Add Floating Round Share Sidebar in Blogger — Free Code
Want a lightweight, eye-catching floating share bar for your Blogger posts? This tutorial gives you a ready-made, copy-paste share sidebar with round buttons for LinkedIn, X (Twitter), Facebook, WhatsApp, Telegram and a Copy Link button. Works on desktop and mobile, requires no external libraries.
Why use a floating round share sidebar?
The floating round share sidebar stays visible while readers scroll, improving social shares and engagement. The round minimalist buttons take up little space and look modern on any blog. This implementation is:
- Lightweight — no external CSS or icon libraries required (SVGs included inline).
- Responsive — adjusts size for smaller screens.
- Easy — paste HTML/CSS/JS into a Blogger HTML widget or inside your post (HTML view).
How to add — copy & paste
Place the CSS in your <head> (or inside the Theme's Edit HTML). Then paste the markup and the script near the end of your post (HTML view) or inside an HTML gadget.
Full copy-paste code (works out of the box)
<!-- Floating Round Share Sidebar -->
<div class="floating-share" id="floatingShare">
<a class="share-btn" id="shareX" target="_blank" rel="noopener" aria-label="Share on X" data-label="Share on X">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a10.9 10.9 0 0 1-3.14.86A4.48 4.48 0 0 0 22.43.36a9.03 9.03 0 0 1-2.86 1.1A4.52 4.52 0 0 0 11.26 6.1c0 .35.03.7.1 1.03A12.83 12.83 0 0 1 1.64 2.15a4.5 4.5 0 0 0-.61 2.28 4.5 4.5 0 0 0 2 3.75 4.45 4.45 0 0 1-2.05-.57v.06a4.5 4.5 0 0 0 3.62 4.42c-.46.13-.95.2-1.45.2-.35 0-.7-.03-1.03-.1a4.5 4.5 0 0 0 4.2 3.13A9.03 9.03 0 0 1 0 20.54a12.77 12.77 0 0 0 6.92 2.03c8.3 0 12.84-6.88 12.84-12.85v-.59A9.22 9.22 0 0 0 23 3z"/></svg>
</a>
<span class="share-label">Share on X</span>
<a class="share-btn" id="shareLinkedIn" target="_blank" rel="noopener" aria-label="Share on LinkedIn" data-label="Share on LinkedIn">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.6c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.44-2.13 2.94v5.7H9.35V9h3.4v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.8zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM6.9 20.45H3.8V9h3.1v11.45z"/></svg>
</a>
<span class="share-label">Share on LinkedIn</span>
<a class="share-btn" id="shareFB" target="_blank" rel="noopener" aria-label="Share on Facebook" data-label="Share on Facebook">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12.07A10 10 0 1 0 12.07 22V14.8h-2.3v-2.75h2.3V9.66c0-2.28 1.36-3.54 3.43-3.54.99 0 1.83.07 2.08.1v2.4h-1.43c-1.12 0-1.34.53-1.34 1.31v1.72h2.67l-.35 2.75h-2.32V22A10 10 0 0 0 22 12.07z"/></svg>
</a>
<span class="share-label">Share on Facebook</span>
<a class="share-btn" id="shareWA" target="_blank" rel="noopener" aria-label="Share on WhatsApp" data-label="Share on WhatsApp">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.472-.149-.672.15-.198.297-.768.967-.942 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.447-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.52-.074-.149-.672-1.611-.922-2.207-.242-.579-.487-.5-.672-.51l-.573-.01c-.198 0-.52.074-.793.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487 .709.306 1.26.489 1.691.626.71.227 1.357.195 1.87.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.174-1.413-.074-.123-.273-.198-.57-.347zM12 .5C5.65.5.5 5.65.5 12S5.65 23.5 12 23.5 23.5 18.35 23.5 12 18.35.5 12 .5z"/></svg>
</a>
<span class="share-label">Share on WhatsApp</span>
<a class="share-btn" id="shareTG" target="_blank" rel="noopener" aria-label="Share on Telegram" data-label="Share on Telegram">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M22 4.01L2 12l6.8 2.3L9 20l3.8-2.4L22 4.01z"/></svg>
</a>
<span class="share-label">Share on Telegram</span>
<a class="share-btn" id="copyLink" href="#" aria-label="Copy link" data-label="Copy Link">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M3.9 12a4.1 4.1 0 0 1 0-5.8L6.6 3.5a4.1 4.1 0 0 1 5.8 0l1.4 1.4-1.4 1.4L11 5.4a2.6 2.6 0 0 0-3.7 0L4.9 7.9A2.6 2.6 0 0 0 4.9 11.6L6.3 13l-1.4 1.4L3.9 12zM20.1 12a4.1 4.1 0 0 1 0 5.8L17.4 20.5a4.1 4.1 0 0 1-5.8 0l-1.4-1.4 1.4-1.4L13 18.6a2.6 2.6 0 0 0 3.7 0l2.3-2.5a2.6 2.6 0 0 0 0-3.7L17.7 11l1.4-1.4 1 2.4z"/></svg>
</a>
<span class="share-label">Copy Link</span>
</div>
<script>
(function(){
// safe encode helpers
function enc(s){ return encodeURIComponent(s||''); }
var pageUrl = window.location.href;
var pageTitle = document.title || '';
var text = pageTitle;
// map elements
var byId = function(id){ return document.getElementById(id); };
var x = byId('shareX'), li = byId('shareLinkedIn'), fb = byId('shareFB'),
wa = byId('shareWA'), tg = byId('shareTG'), cp = byId('copyLink');
if(x) x.href = 'https://twitter.com/intent/tweet?text='+enc(text)+'&url='+enc(pageUrl);
if(li) li.href = 'https://www.linkedin.com/shareArticle?mini=true&url='+enc(pageUrl)+'&title='+enc(text)+'&summary=&source=';
if(fb) fb.href = 'https://www.facebook.com/sharer/sharer.php?u='+enc(pageUrl);
if(wa) wa.href = 'https://api.whatsapp.com/send?text='+enc(text+' '+pageUrl);
if(tg) tg.href = 'https://t.me/share/url?url='+enc(pageUrl)+'&text='+enc(text);
if(cp){
cp.addEventListener('click', function(e){
e.preventDefault();
if(navigator.clipboard){
navigator.clipboard.writeText(pageUrl).then(function(){
cp.setAttribute('title','Link copied!');
cp.style.transform = 'translateY(-4px)';
setTimeout(function(){ cp.style.transform = ''; cp.setAttribute('title','Copy link'); }, 1200);
});
} else {
// fallback
var el = document.createElement('textarea'); el.value = pageUrl; document.body.appendChild(el);
el.select(); try{ document.execCommand('copy'); cp.setAttribute('title','Link copied!'); } catch(err){}
document.body.removeChild(el);
}
}, false);
}
})();
</script>
How to install on Blogger
- Open Blogger → Layout → Add a Gadget → choose "HTML/JavaScript".
- Paste the HTML markup (the <div class="floating-share"> ... </div> and the <script> part) into the gadget content. Save.
- Open Theme → Edit HTML and paste the CSS (from <style> above) inside <head> or in your theme's CSS area.
- Save theme and test a post. The share bar should appear on left; change class to "floating-share right" if you prefer right side.
Tip: Because Blogger serves posts on different URLs, the script uses
window.location.href and document.title so each share links to the current post automatically.
Accessibility & customization
The share buttons have aria-label attributes and keyboard focus styles. You can:
- Change size by updating the
width/heightin CSS for.share-btn. - Move them to the right by adding class
rightto the.floating-sharecontainer. - Remove any service you don’t want by deleting that
<a>block.
Five common questions (FAQ)
Q1: Will this slow down my blog?
A: No — the code is tiny and uses inline SVGs and a small script, so the performance impact is negligible.
Q2: Can I change the order of buttons?
A: Yes — reorder the <a> blocks in the markup to change the vertical order.
Q3: How to hide the sidebar on mobile?
A: Add a media query such as @media(max-width:600px){.floating-share{display:none}} into the CSS.
Q4: Does it work with HTTPS and custom domains?
A: Yes — share URLs use your page URL so HTTPS and custom domains are supported automatically.
Q5: How to add more networks (Pinterest, Email)?
A: Add new <a> blocks with the proper share URL patterns (Pinterest: https://pinterest.com/pin/create/button/?url=..., Email: mailto:?subject=...&body=...).
Hi Please Do not Spam in Comments