How to add Social Follow Button in Blog?


Have you ever wondered how to add social follow button in blog or website? You might have seen many blogs, websites and online stores that have an attractive social follow button like Facebook, Twitter, Instagram etc. 
This is a kind of simple feature/function which helps to increase the readership for a blog or a website. It can be shared on social networks. Today I'll show you the way to add social follow buttons to your Blogger blog.


Social follow buttons are very important for a blog. 


Visitors can easily follow the blog on social media by clicking on these buttons. 

These social follow widgets are designed with HTML and CSS, which are 100% responsive. 

Blogger custom templates also come with social follow buttons. 

But if you don't like them, then you can use these widgets for blogger.



How to add Social Follow Button in Blog?


To add a responsive and beautiful social media widget inside your Blogger blog, follow the process given below.


Step 1. Go to Blogger Dashboard > Template
Click on Edit HTML








Step 2. Go to blogger dashboard > Template > Edit HTML and find the </head> tag by pressing Ctrl+F .

step 3. Now copy the code given below and paste it just before the </head> code.  Click on the Save theme button.


<link rel="stylesheet" href="https://cdnjs.cloudfla re.com/ajax/libs/fontawesome/4.7.0/css/fontawesome.min.css"/> 





Step 4. Go to Blogger dashboard > Layout > Add a Gadget > HTML/JavaScript.







Step 5. Copy the below code and paste it into the HTML/JavaScript gadget.






Step 6. Replace the links with your own social media links in the code and save it.












List of Social Media Buttons HTML Code

Here are some amazing social media follow buttons for blogger. 

First, choose a social network and copy the HTML code.

Next, paste it into your blog post.


Style 1



................Copy this code 👇👇👇

_________________________________________
<style> 

. to-social

follow{width : 300px ; padding: 10px;margin:0}.to-socialfollow .fa{font-size:18px; padding: 16px; textalign:center ;margin:Spx 2px;width: 20%; textdecoration:none; color :#fff}.to-social-follow .fa:hover{opacity: .7}.to-social-follow .fa

facebook {background : #3B5998} .to-social-follow .fatwitter {background :#55ACEE}.to-social-follow .fagoogle{background: #dd4b39}.to-social-follow .falinkedin{background:#007bb5}.to-social-follow .fayoutube{background: #b00}.to-social-follow .fainstagram{background: #125688}. to-social-follow .fapinterest{background:#cb2027} </style> <div><a href=""> <span style="color: white; ">Keyboard in Hindi</span> </a></div> <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 “#" with your own social media page or profile URL like (https://facebook.com/tech.com). 


If you don't need any social media icons, you can remove the entire code in the <a> tag. 

et'ss say remove the Pinterest icon, then remove  “<a href="#" class="fa fa-pinterest" target="_blank"></a>"  from the list.


Style 2









................ copy this code 👇👇👇👇👇👇👇👇

______________________________________________
<style> 

. techornate-social-buttons ul{padding-left:0;liststyle:none}.techornate-social-buttons li a{texttransform: uppercase; text-decoration: none; padding: 10px 1px 10px 10px; letter-spacing: 2px; font

$size: 10px; color :#f ff; display:block; border - 

radius :3px}.techornate-social-buttons ul li{marginbottom: 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 #B181B1}.techornate-social-buttons li a.social-btnfacebook {background : #3b5998}. techornatesocial-buttons li a.social-btn

twitter {background : #1da1f2}.techornate-social-buttons li a.social-btnyoutube{background : #cd201f}.techornate-social-buttons li a.social-btninstagram{background : #40S5de6} . techornate-socialbuttons 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"></1> </a></]i> </ul> </div><div><a 
 </a></div> 

______________________________________________

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


Style 3



...........,. copy this code 👇👇👇👇
_________________________________________
<style> 

ul. techornate-socialshare{padding:0;margin:0; overflow: hidden}ul. techornat e-social-share li{list-style:none; float: left ;marginright : 4%; width : 48%; margin

bottom: 10px; background: #fafafa; over flow: hidden}ul.tec hornate-social-share li a{textdecoration:none; display: inline

block; float: left; color :#fff;height :40px;width: 40px; te xt-align: center; font-size: 14px; line

height :40px;margin

right: 16px; position:relative;transition:all .2s easein-out; -webkit-transition:all .2s ease-in-out; -moztransition: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.techornatesocial-share li 

a. facebook {background : #436feb}ul . techornate-social - share li a. facebook: after{border:4px solid 

#436f eb; border -top-color : transparent ; border -bottomcolor: transparent ; border-right - 

color: transparent}ul.techornate-social-share li 

a. twitter {background : #43c9eb}ul . techornate-socialshare li a.twitter:after{border:4px solid 

#43c9eb ; border -top-color : transparent ; border -bottomcolor: transparent ; border-right - color:transparent}ul.techornate-social-share li 

a. google{background: #f14133}ul.techornate-socialshare li a.google:after{border :4px solid 

#f 14133; border -top-color : transparent; border -bottomcolor: 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 -topcolor: 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; lineheight: 15px; color : #999; font

weight :700; display: block}ul .techornate-social-share li span. scount-number {mar gin

top : 5px; color :#333}ul.techornate-social-share li:nthchild(2n){margin-right:0} </style> <div><a href="https: //oyepandey)1.com/keyboard-in-hindi/"> <span style="color: white;">Keyboard in Hindi</span> </a></div> 

<ul class="techornate-social-share”> 

<li> <a href="#" class="facebook"><i class="fa fafacebook"></i></a> <span class="scountnumber ">44, 143</span> <span>Fans</span></]i> 

<li> <a href="#" class="twitter"><i class="fa fatwitter"></i></a> <span class="scount

number ">39,505</span> <span>Followers</span></li> <li> <a href="#" class="google"><1 class="fa fagoogle-plus"></i></a> <span class="scountnumber ">25 ,203</span> <span>Followers</span></1li> <li> <a href="#" class="youtube”><i class="fa fayoutube"></i></a><span class="scount

number ">7,456</span> <span>Subscr 1bers</span></li> </ul> 
_________________________________________

Style 4







____________________________________________
<style> 

.s-text strong, .social-counter{font

weight :900}. techornate-socials 

a{display: block; color :#f ff; padding: 12px 

15px; position: relative; margin-bottom: 5px; textdecoration:none}.techornate-socials a 

span, .techornate-socials a:before{z

index: 2; position:relative}.social

counter {position: absolute; font-size: 14px; lineheight :1; padding-top: 4px}. stext{float:right}.techornate-socials a:after{content:” 

“; height : 100%;width:0; top:0; left :0; position: absolute; background: #252b42 ; z-index: 1}. fafacebook : before, . fasubscribe:before, .fa-twitter :before{display: inlineblock; width: 16px; font-family: FontAwesome; mar ginright: 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

subscr ibe{background : #d2002c}. fa

subscribe: before{content : “\f167"} 

</style> <div><a 

href="https: //oyepandeyji.com/keyboard-in-hindi/"> <span style="color: white;">Computer Keyboard in Hindi</span></a></div> 

<div class="techornate-socials”> 

<a target="_blank" href="#" class="fa-facebook"><span class="social-counter”>146,200</span><span class="stext">Follow us on <strong>Facebook</strong></span> </a> 

<a target="_blank" href="#" class="fa-twitter”><span class="social-counter”>S0, 748</span><span class="stext">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> 
______________________________________________
If this post is good then it will definitely share it.