Social Media Follow

Social Media Follow Button plays a really vital role for bloggers or any kind of website. For platforms like WordPress, you have got Social Media Plugin on the market; however, in Blogger Platform, you do not envision any Social Media Follow contraption or appliance. We'll find out how to feature Social Media Follow Button on the Blogger website during this post. Social Media Follow Button in Blogger

Social Media Icons helps the North American nation to attach our website travelers to our Social Pages and Social profiles. You'll be able to install social media like Facebook, Twitter & Instagram like well-liked social Icons.

In this post, you have been given some Social Follow contraption, designed in HTML and CSS, 100% Responsive. Some Blogger Templates conjointly go along with Social Media Follow Button. They're terribly easy and Unattractive. That's why you'll be able to use these widgets for a diary website that you'll like.

How to Add Social Media Follow Button For Blogger

Follow the procedure given below to feature a Responsive and engaging Social Media Follow Button on your Blogger website.

To add Social Media Follow Button, 2 settings need to be done,

1. Theme Section
2. Layout Section

Setting one - Theme Section

Step 1: Move to the Theme section of the Menu Bar within the Blogger Dashboard, click on Edit HTML here.

Step 2: once the HTML Code Section window opens, press the Ctrl + F Button, there'll be an inquiry Bar Show within the high aspect. Sort "" in it and press ENTER.

Step 3: Copy the code given below and paste before code, click on Save Theme.

The setting of our Theme Section is currently done. Currently, we have a tendency to return to the Layout Setting.

Setting two - Layout Section.

Step 1: Move to the Layout Section of the Menu Bar within the Blogger Dashboard and click on "Add a Gadget" within the Sidebar.

Step 2: currently, the popup window can show. Scroll down click on the “HTML / JavaScript” appliance.

Step 3: Copy the code of Social Media Follow contraption that you like below and paste the code during this HTML / JavaScript during this appliance.

Last, click on the "SAVE" button and click on Save Arrangement.

Improving Done Your Work .. !! you have got with success superimposed Social Media Follow Button.

Now you move to the diary Dashboard and Reload the Window, you'll see that the Social contraption has gone continue to exist on your diary website.

List of Social Media Follow Buttons HTML Codes

Here area unit a lot of Responsive and engaging Social Media Follow Buttons for Blogger Platform. Choose whichever Social contraption style you prefer below, copy the CODE, follow the Layout Section Setting.

Style 1:

Replaced each Highlighted "#" together with your Own Social Profiles or Social Pages' address.

Style 3:

<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.instagram{background:#f14133}ul.techornate-social-share li a.instagram{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">#</span> <span>Fans</span></li> <li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">#</span> <span>Followers</span></li> <li> <a href="#" class="instagram"><i class="fa fa-instagram"></i></a> <span class="scount-number">#</span> <span>Followers</span></li> <li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">#</span> <span>Subscribers</span></li> </ul>

Click Here to

Note:

Replaced each Highlighted "#" together with your Own Social Profiles or Social Pages' address.

Style 4:

<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">#</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a> <a target="_blank" href="#" class="fa-twitter"><span class="social-counter">#</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a> <a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">#</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a> <div class="clear"> </div> </div> 

Click Here to

Note: 

Replaced each Highlighted "#" together with your Own Social Profiles or Social Pages' address.

Techhacky, I hope you likable this post to add Social Media Follow Button to the Blogger website. If you face any drawbacks during this post, then comment on the North American nation. Social Media Follow Button For Blogger