How to add HTML Code for Social Media Buttons to Website and Blogger

HTML Code for Social Media Buttons to Website and Blogger

How to add HTML code for social media buttons to website and blogger

In this post, I will show How to add HTML code for social media buttons to website and blogger. The social media icon allows your readers to follow your social media profiles. Here you will find the most popular social icon services, such as Facebook, Instagram, Twitter, and Pinterest.

These social fallout widgets are designed with HTML and CSS, all of which are responsive to Blogger. Blogger custom templates also come with a social follow button. But if you don't like them, then you can use this widget for Blogger. Which we will show you


How to add HTML code for social media buttons to website and blogger


Follow the steps to add social media button widgets on your Blogger blog.

Step 1: First, log in on your Blogger account with Gmail ID and go to the theme menu. Click the Edit “HTML” button here.



Step 2: Click any place in the HTML code and press Ctrl + F. Then a search box will open, and here you type "</head>" and press Keyboard “Enter” button.

 


Step 3: Now copy the one line code below and paste it before the “</head>” code. Click the "Save" Theme button.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>


 

It's over now! Let's move on to the second part.

Step 4: Now go to Blogger's "Layout" section. Click "Add a gadget" in the sidebar section.


 

Step 5: Now the popup will open, scroll down and click on the "HTML / JavaScript" gadget.


 

Step 6: Now select your anyone social media widget code (styles 1, 2, 3 and 4) for Blogger from the list below and paste the code into the content box.

 

Finally, Click the "Save" button. Click "Secure Settings." Specifically, go to your blog and reload it. You will see that the widget is live on your blog.


 

 

List of social media buttons HTML code

Here are some amazing social media bloggers to follow the buttons. Here, add any widget you choose to your Blogger blog. Copy any HTML code for your block.

Style 1:


<style> 
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-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}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-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}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39} 
</style> 
<div class="techornate-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-google">Follow on Google+ <i class="fa fa-google"></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> 


Replace every highlighted “#” with your own social media page or profile URL like (https://instagram.com/murskills).

If you don't need any social media icons, you can delete the entire code in the <a> tag. Suppose, to remove the Pinterest icon, remove "<a href="#" class="fa fa-pinterest" target="_blank"> </a>" from the list).

 

Style 2

<style> 
.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}
 </style> 
<div class="to-social-follow"> 
<a href="#" class="fa fa-facebook" target="_blank"></a> 
<a href="#" class="fa fa-twitter" target="_blank"></a> 
<a href="#" class="fa fa-google" target="_blank"></a> 
<a href="#" class="fa fa-linkedin" target="_blank"></a> 
<a href="#" class="fa fa-youtube" target="_blank"></a> 
<a href="#" class="fa fa-pinterest" target="_blank"></a>
 </div>

 

 

Style 3

<style> 
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-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}.techornate-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="techornate-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>

 

Replace each "number" with the number of your social followers, fans and YouTube users.

 

Style 4


<style> 
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0} </style> 
<ul class="techornate-social-share"> 
<li> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li> 
<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li> 
<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li> 
<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li> 
</ul>

Replace each "number" with the number of your social followers, fans and YouTube users.

Hope you've followed a full blogger blog social media button. Share this article if anyone needs it. Also, if you have any problems following this guide, feel free to comment.

Post a Comment

Post a Comment (0)

Previous Post Next Post