4 Social Media Widgets Buttons Design HTML Code

Here we are going to tell you how you can put a social media button widget in your blog site. In this way, everyone gets the social media button widget in their blog own template too, but even if you do not like all those widgets, then it does not matter.

Read More: How to Disable Ad Blocker Detection For Blogger?

Here we are going to show you 4 different types of social media button widget of different designs and we are going to give you complete information about how you can apply it in your blog, so whatever you like out of it, you can choose your blog.

Social media button widget

Whenever you open a site, you will definitely get the social media button widget on top, bottom, right or left, by clicking on which you can go to the social account of the owner of that site.

And anyway you need to add a social media account to your site because without this you can not even get AdSense approval and if you put a professional social media button widget on your site then your site will look even more professional.

Social media button widget 1st Design HTML Code

  • Here you copy the above code.
  • Now open this code in notepad or in any other program.
  • Now in this code, instead of facebook-link, twitter-link, google-plus-link, linkedin-link, pinterest-link, feedburner-link, you put your link of that social media i.e. replace it.
  • Now copy that code .
<style type="text/css">
.social-profile-icons{margin-top:20px 0 0;overflow:hidden}.social-profile-icons ul{display:inline-block;margin:0 auto!important;text-align:center}.social-profile-icons ul li{background:transparent!important;border:none!important;float:left;list-style-type:none!important;margin:0 4px 10px!important;padding:0!important}.social-profile-icons ul li a,.social-profile-icons ul li a:hover{background:url("https://infotechbot.com/wp-content/uploads/2022/04/sprite_32x32.png") no-repeat scroll 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;display:block;height:38px;overflow:hidden;text-indent:-999px;transition:all 0.25s linear 0s;width:38px}.social-profile-icons ul li.social-facebook a{background-color:#3b5998;background-position:-60px 3px}.social-profile-icons ul li.social-twitter a{background-color:#00aced;background-position:-253px 3px}.social-profile-icons ul li.social-gplus a{background-color:#dd4b39;background-position:-93px 3px}.social-profile-icons ul li.social-linkedin a{background-color:#007bb6;background-position:-125px 3px}.social-profile-icons ul li.social-pinterest a{background-color:#cb2027;background-position:-157px 3px}.social-profile-icons ul li.social-rss a{background-color:#F87E12;background-position:-189px 3px}.social-profile-icons ul li a:hover{opacity:.8}
</style>
<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a rel="nofollow" target='_blank' href="facebook-link" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a rel="nofollow" target='_blank' href="twitter-link" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a rel="nofollow" target='_blank' href="google-plus-link" title="Google+">Google+</a></li>
<li class="social-linkedin"><a rel="nofollow" target='_blank' href="linkedin-link" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a rel="nofollow" target='_blank' href="pinterest-link" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a rel="nofollow" target='_blank' href="feedburner-link" title="RSS">RSS</a></li>
</ul></div>

Social media button widget 2nd Design HTML Code

  • Here you copy  the above code. 
  • Now open this code in notepad or in any other program.
  • Now in this code,  in place of # you should put facebook link, twitter link i.e. your own link   of that social media which is written  i.e.  replace  it.
  • Now copy  that code  .
<!-- HMH Social Widget Start -->
<style>
ul.HMH-follow-buttons a:hover{color:#03c9a9}.HMH-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.HMH-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.HMH-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.HMH-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.HMH-follow-buttons.b-title i{margin:0 auto 10px;display:block}.HMH-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='HMH-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>Instagram</a></li>
<li><a href='#'><i class="fa fa-youtube"></i>Youtube</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-feed"></i>RSS</a></li>
</ul>
<!-- HMH Social Widget End -->

Social media button widget 3rd Design HTML Code

  • Here you copy the above code.
  • Now open this code in notepad or in any other program.
  • Now in this code, in place of # you should put facebook link, twitter link i.e. your own link of that social media which is written i.e. replace it.
  • Now copy that code .
<!-- HMH Social Widget Start -->
<style>
.HMH-social-buttons ul{padding-left:0;list-style:none}.HMH-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.HMH-social-buttons ul li{margin-bottom:10px;width:100%}.HMH-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.HMH-social-buttons li a.social-btn-facebook{background:#3b5998}.HMH-social-buttons li a.social-btn-twitter{background:#1da1f2}.HMH-social-buttons li a.social-btn-youtube{background:#cd201f}.HMH-social-buttons li a.social-btn-instagram{background:#405de6}.HMH-social-buttons li a.social-btn-linkedin{background:#007bb5}
</style>
<div class="HMH-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-linkedin">Follow on Linkedin <i class="fa fa-Linkedin"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>
<!-- HMH Social Widget End -->

Social media button widget 4th Design HTML Code

  • Here you copy the above code.
  • Now open this code in notepad or in any other program.
  • Now in this code, in place of # you should put facebook link, twitter link i.e. your own link of that social media which is written i.e. replace it.
  • Also, you can write the number of followers you are seeing in this code by increasing it according to you.
  • Now copy that code .
<!-- HMH Social Widget Start -->
<style>
.s-text strong,.social-counter{font-weight:900}.HMH-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.HMH-socials a span,.HMH-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.HMH-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="HMH-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>
<!-- HMH Social Widget End -->

Did you like the information given here, do tell us in the comment box and share this post on all your friends and social networks so that others can also get a chance to learn something new.

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start infotechbot.com for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment