Social Media Follow Button To Blogger

How to Add Social Media Buttons to Blogger

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

In this post, I will show you how to add social media follow button widget to your Blogger blog. Social media buttons will let your readers follow your social pages and profiles. Here you get the most popular social media buttons services like Facebook, twitter, google plus, etc.
These social follow buttons widgets are designed with HTML and CSS, which are 100% responsive. For the blogger, maximum custom blogger templates come with social follow buttons and social media widgets. But if you don’t like them, you may choose one of these amazing social media to follow buttons for bloggers.

I will show you the complete process of adding these social media follow buttons for bloggers.

Step 1: First Login to your blogger account and Go to the Theme section. Here click on the Edit HTML button.

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Step 2: Click anywhere in the HTML Code and Press Ctrl+F. Then a search box will open, here you type "</head>" code of your template and hit enter.

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Step 3: Now copy the code provided below and paste it right before the ending </head> code. Click on the Save template button.

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

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

Presently its Done!!!!!! Moving to the second point of the settings. 

1. Now go to the "Layout" area of the blogger. 

2. In the sidebar area click on "Add a Gadget". 

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

3. Look down and Click on "HTML/JavaScript" gadget. 

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

4. Presently pick your ideal web-based life Widget Style code (Style 1, 2, 3 and 4) for a blogger from the rundown underneath and glue the code into the Content box. 

5. At long last, click on the "Spare" catch. Snap "spare courses of action". You're done, Go to your blog and reload it. You will see the gadget is live on your blog. 

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Rundown of Social Media Buttons Custom Code 

Here is some astonishing online networking to pursue catches for a blogger to include some wonderful web-based life symbols. Now, picked whatever gadget you like and add it to your blogger blog. From the gadget, style duplicates anybody's HTML code for online networking symbols blogger. 

Gadget Style 1:

Social media follow button to blogger, How to add social media icons to blogger, html code for social media icons blogger

Code:

<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>

Note: Replace every highlighted Red color “#” with your own social media page or profile URL like (https://facebook.com/gadgetinfluencer). 

In case if you don't need any of the social media icons then you can delete it by removing the entire code in <a> tag. Suppose delete Pinterest icon then remove "<a href="#" class="fa fa-pinterest" target="_blank"></a>" from the list.

Gadget Style 2:

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Code

<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> 
</div>

Note: Replace each featured Red shading "#" with your very own internet based life page or profile URL like (https://facebook.com/gadgetinfluencer). 

Gadget Style 3: 

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Code:

<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>

Note: Replace each featured Red shading "#" with your very own online life page or profile URL like (https://facebook.com/gadgetinfluencer). 

Replace each featured "numbers" with your very own social adherents, fans, and YouTube supporter numbers. 

Gadget Style 4: 

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger

Code:

<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> 

Note: Replace each featured Red shading "#" with your very own online networking page or profile URL like (https://facebook.com/gadgetinfluencer). 

Replace each featured "numbers" with your very own social followers, fans, and YouTube supporter numbers. 

So's it, a total instructional exercise how to Add Social Media Follow Buttons Widget to Blogger. On the off chance that you appreciated this instructional exercise, at that point please share this article with your companions. Likewise, on the off chance that you face any issue in following this instructional exercise, don't hesitate to leave a remark. I will attempt my best to fathom your question.

Social media follow button to blogger, How to add social media icons to blogger, HTML code for social media icons blogger