Round Black Style Social Follow Button is a simple and modern social media icon design where the icons are in a circular shape with a black background and white icon color.
This style gives a clean, professional, and minimal look.
It is commonly used in a website’s footer or header to display social media profile links.
Add Round Black Style Social Follow Button Widgets HTML Javascript Code:
<style>
.footer-social {
text-align: center;
padding: 25px 10px;
background: #f5f5f5;
font-family: Arial, sans-serif;
}
.footer-social .copyright {
color: #777;
font-size: 16px;
margin-bottom: 15px;
}
.footer-social .follow-text {
font-size: 18px;
color: #555;
margin-right: 12px;
}
.footer-icons {
display: inline-flex;
align-items: center;
gap: 10px;
}
.footer-icons a {
width: 40px;
height: 40px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
text-decoration: none;
font-size: 16px;
transition: 0.3s;
}
.footer-icons a:hover {
opacity: 0.8;
transform: scale(1.1);
}
</style>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<div class="footer-social">
<div class="copyright">
© 2026 YourSiteName
</div>
<div>
<span class="follow-text">Follow Us</span>
<div class="footer-icons">
<a href="https://facebook.com/yourprofile" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/yourprofile" target="_blank">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://youtube.com/yourchannel" target="_blank">
<i class="fab fa-youtube"></i>
</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://instagram.com/yourprofile" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
In this round black social follow button code, you can change the following things:
- 1. Website Name / Copyright : Text Replace the site name or year with your own blog name.
- 2. Social Media Links : Change the href links to your real social profile URLs.
- 3. Icon Size : Increase or decrease the width, height, and font-size (for example: 40px to 50px).
- 4. Background Color : Change the black color (#000) to any color you prefer.
- 5. Icon Color : Change the white color (#fff) to match your brand style.
- 6. Hover Effect : Modify hover background color, scale effect, or opacity.
- 7. Spacing (Gap / Margin) : Adjust space between icons using margin or gap values.
- 8. Border Radius : Keep 50% for circle shape, or reduce it to make rounded square icons.
- 9. Font Style : Change font-family, font-size, or text alignment of the “Follow Us” text.
- 10. Add or Remove Social Platforms : You can add more icons or remove any platform you don’t use.
You should add the Round Black Style Social Follow button code here:
Method 1 :
Blogger Dashboard → Layout → Footer → Add a Gadget → HTML/JavaScript → Select HTML/JavaScript → Paste the full code → Click Save.
- It will display properly in the footer section.
Method 2 :
Blogger → Theme → Edit HTML → Search for the </body> tag → Paste the full code just above it → Click Save.
- If you want it to appear specifically in the footer area, Method 1 is the best option.
Comments
Post a Comment