How to Add Social Media Button Above the Post in Blogger
Do you want to add stylish social media buttons above your Blogger post? In this article, I will share a simple Sigma-style social media button design that you can easily add to your Blogger website using HTML and a little bit of CSS.
Why Add Social Media Buttons Above the Post?
Social media buttons help your visitors connect with you quickly. When buttons appear above the article, users can easily follow your Facebook, Instagram, Telegram, YouTube, WhatsApp, and X account.
- Increase social followers
- Improve user engagement
- Make your blog look professional
- Easy to customize
- Mobile friendly design
Live Preview Style
Step 1: Copy This HTML Code
Paste this code above your Blogger post content in HTML View.
<div class="sigmaBtnBox"> <a class="sigmaBtn fb" href="https://facebook.com/YOURUSERNAME">Facebook</a> <a class="sigmaBtn ig" href="https://instagram.com/YOURUSERNAME">Instagram</a> <a class="sigmaBtn tg" href="https://t.me/YOURCHANNEL">Telegram</a> <a class="sigmaBtn yt" href="https://youtube.com/@YOURCHANNEL">YouTube</a> <a class="sigmaBtn wa" href="https://whatsapp.com/channel/YOURCHANNEL">WhatsApp</a> <a class="sigmaBtn x" href="https://x.com/YOURUSERNAME">Twitter / X</a> </div>
Step 2: Add CSS Code
If you want to use this design in all posts, paste the CSS code in Blogger Theme before ]]></b:skin>.
.sigmaBtnBox{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:18px 0;
}
.sigmaBtn{
color:#fff;
text-decoration:none;
padding:12px;
border-radius:12px;
text-align:center;
font-weight:700;
font-size:14px;
}
.fb{background:#1877f2}
.ig{background:linear-gradient(45deg,#feda75,#d62976,#962fbf)}
.tg{background:#229ed9}
.yt{background:#ff0000}
.wa{background:#25d366}
.x{background:#111}
@media(max-width:600px){
.sigmaBtnBox{grid-template-columns:repeat(2,1fr)}
}How to Add This Code in Blogger
Step 1: Login to your Blogger dashboard.
Step 2: Open your post or create a new post.
Step 3: Change Compose View to HTML View.
Step 4: Paste the social button HTML code above your article.
Step 5: Replace all demo links with your own social media links.
Step 6: Publish or update your post.
Final Words
This is a simple and lightweight way to add Sigma-style social media buttons above your Blogger post. You can change colors, text, and links according to your website branding.
Nisara Vanilla Rush Perfume for woman
Vanilla Perfume .
- Floral First Impression
- Sweet, Creamy at Heart
- Warm & Sensual Base
- Creamy Vanilla Infusion
FAQ
Yes, this code is Blogger-safe and works in Blogger posts, pages, and HTML widgets.
Yes, this design works with Plus UI, News Sigma, JetTheme, Median UI, and most Blogger templates.
Yes, the layout is responsive and automatically adjusts on mobile devices.
No, this version does not need any external CDN or Font Awesome link.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.
