Post #140 email list, now need share buttons - reader shares on WhatsApp = free viral traffic. Blogger has no share buttons. Must add lightweight, no external JS (external JS slows like Post #131-132).
In Post #141, add fast share buttons.
Step 1: Floating Share Buttons - Left Side Desktop, Bottom Mobile
- Blogger → Theme → Edit HTML → Find
]]></b:skin>→ Paste above:
/* Share Buttons Post 141 */
.share-float{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;}
.share-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:18px;box-shadow:0 4px 10px rgba(0,0,0,0.15);transition:0.3s;}
.share-btn:hover{transform:scale(1.1);}
.share-wa{background:#25D366;} .share-fb{background:#1877F2;} .share-tw{background:#000;} .share-li{background:#0A66C2;} .share-pi{background:#E60023;}
@media(max-width:900px){
.share-float{left:0;right:0;top:auto;bottom:0;transform:none;flex-direction:row;justify-content:center;background:#fff;padding:8px 0;border-top:1px solid #e5e7eb;}
.share-btn{width:38px;height:38px;font-size:16px;}
}
- Find
</body>→ Above it paste:
<div class='share-float' id='share-float'>
<a class='share-btn share-wa' id='sh-wa' target='_blank' href='#'>W</a>
<a class='share-btn share-fb' id='sh-fb' target='_blank' href='#'>f</a>
<a class='share-btn share-tw' id='sh-tw' target='_blank' href='#'>X</a>
<a class='share-btn share-li' id='sh-li' target='_blank' href='#'>in</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var url = encodeURIComponent(window.location.href);
var title = encodeURIComponent(document.title);
var wa = document.getElementById('sh-wa'); if(wa) wa.href='https://wa.me/?text='+title+'%20'+url;
var fb = document.getElementById('sh-fb'); if(fb) fb.href='https://www.facebook.com/sharer/sharer.php?u='+url;
var tw = document.getElementById('sh-tw'); if(tw) tw.href='https://twitter.com/intent/tweet?url='+url+'&text='+title;
var li = document.getElementById('sh-li'); if(li) li.href='https://www.linkedin.com/sharing/share-offsite/?url='+url;
// Hide on homepage
if(window.location.pathname=='/' || window.location.pathname==''){ document.getElementById('share-float').style.display='none'; }
});
</script>
Replace W, f, X, in with SVG icons if you want - text works for speed.
Step 2: Inline Share Buttons After Post Title (High CTR)
- Find
<data:post.body/>→ Above it paste share count + buttons:
<div style="display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;">
<span style="font-size:12px;color:#666;padding:8px 0;">Share:</span>
<a id="sh2-wa" target="_blank" style="background:#25D366;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;text-decoration:none;">WhatsApp</a>
<a id="sh2-fb" target="_blank" style="background:#1877F2;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;text-decoration:none;">Facebook</a>
<a id="sh2-tw" target="_blank" style="background:#000;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;text-decoration:none;">Twitter</a>
</div>
<script>
var u=encodeURIComponent(location.href); var t=encodeURIComponent(document.title);
document.getElementById('sh2-wa').href='https://wa.me/?text='+t+'%20'+u;
document.getElementById('sh2-fb').href='https://www.facebook.com/sharer/sharer.php?u='+u;
document.getElementById('sh2-tw').href='https://twitter.com/intent/tweet?url='+u+'&text='+t;
</script>
Step 3: Use SVG Icons (Better Than Text)
Replace W letter with SVG for professional look - use icons from heroicons or fontawesome free - but keep size small.
<!-- WhatsApp SVG --> <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M12 0C5.4 0 0 5.4 0 12c0 2.1.6 4.1 1.6 5.9L0 24l6.3-1.6c1.7.9 3.6 1.4 5.7 1.4 6.6 0 12-5.4 12-12S18.6 0 12 0z"/></svg>
Step 4: Track Which Share Gets Clicks
- Use free tool: Go to bit.ly → Shorten your post URL → Use that short URL in share href for tracking
- Or add GA4 event:
onclick="gtag('event','share', {method:'WhatsApp'})"to each button - After 30 days, check Analytics → WhatsApp usually 70% shares for Monetization niche in India
Step 5: Don't Use ShareThis / AddThis - Why?
| Plugin | Load Time | Ads? |
| ShareThis, AddThis | +2.5 sec, 15 requests | Shows ads, tracks users |
| Our Post #141 code | 0.05 sec, 0 requests | No ads, private |
Post #141 Complete.
Next Post #142: How to Add Author Box in Blogger - E-E-A-T for AdSense.
0 Comments