How to Add Cute Social Media Share Buttons in Blogger

Adding cute and stylish social media share buttons to your Blogger site can improve user engagement and make it easier for visitors to share your content. In this guide, we will show you how to add custom-designed social media share buttons to your blog posts.

---

Step 1: Choose a Button Style

There are different styles of social media buttons, such as:
✅ Flat design (Minimalistic look)
✅ Rounded buttons (Soft and friendly)
✅ Animated buttons (Hover effects)

For a cute look, we recommend using colorful, rounded, and animated buttons.

---

Step 2: Add Social Media Share Buttons Using HTML & CSS

Follow these steps to add stylish share buttons below every post in Blogger.

1. Open Blogger Theme Editor

1. Go to Blogger Dashboard → Click on Theme.
2. Click on Customize → Select Edit HTML.

2. Add CSS for Button Styling

Find the </head> tag and paste the following CSS code above it:

<style>
.social-share {
    text-align: center;
    margin-top: 20px;
}
.social-share a {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    border-radius: 50%;
    text-decoration: none;
    color: white;
    font-size: 18px;
    width: 40px;
    height: 40px;
    text-align: center;
    transition: transform 0.3s ease;
}
.social-share a:hover {
    transform: scale(1.2);
}
.fb { background: #1877F2; }
.tw { background: #1DA1F2; }
.wa { background: #25D366; }
.tg { background: #0088CC; }
</style>

---

3. Add the Share Button Code Below Blog Posts

Find this section in your Blogger theme:

<data:post.body/>

Right below it, paste this HTML code:

<div class="social-share">
    <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=<data:post.url/>" target="_blank">F</a>
    <a class="tw" href="https://twitter.com/intent/tweet?url=<data:post.url/>" target="_blank">T</a>
    <a class="wa" href="https://api.whatsapp.com/send?text=<data:post.title/> - <data:post.url/>" target="_blank">W</a>
    <a class="tg" href="https://t.me/share/url?url=<data:post.url/>&text=<data:post.title/>" target="_blank">T</a>
</div>

📌 This will add share buttons for:

• Facebook (F)
• Twitter/X (T)
• WhatsApp (W)
• Telegram (T)

---

Step 4: Save & Preview

1. Click Save in the Blogger theme editor.
2. Open a blog post and check if the buttons appear below the content.
3. Click on the buttons to test if they correctly share the post.

---

Bonus: Animated Button Effect (Pulse Animation)

If you want a cuter, animated effect, add this CSS inside <style>:

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.social-share a {
    animation: pulse 2s infinite;
}

This will make the buttons gently pulse, making them more visually appealing!

---

Final Thoughts

By adding these cute, rounded, and animated social media share buttons, you can:
✅ Encourage visitors to share your content.
✅ Increase traffic to your blog.
✅ Enhance the overall design of your website.

Try it out, and let us know how it looks! 🚀