How To Add Social Media Follower Icons To Your Blog Side Bar



This tutorial helps you to add Custom Social follower Widget in your blogger Blog that helps your readers to follow your blog through Social Media Sites (Like Facebook, Twitter Etc). Its Also a great way of getting more traffic. There are several ways to add a Social Follower widget in your blog.


Follow Steps to add this Social Follwers Widgets in your Blog

1. Go to blogger.com. If you have more then 1 Blog then select the blog in which you want to add this Social Follower Widget.

2. Now Click on Template >> Edit HTML. As shown in the Pic.



3. Now press (ctrl + f) button you will get a get a Search Box And Search <head>. And Paste the below link after Head tag. And click on Save Template
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

4. Click on Layout >> Add a Gadget. As shown in the pic below.


Also Read :- Earn money with Amazon

5. Now you see a PopUp as shown in the Pic Below. Now click on HTML/JavaScript



6. Now you see something as Shown in the pic below. 
Blogger social follower widget

7. Enter In Title field "Follow Us" and Copy the below code and paste it in Content Field.

<style>
.Fbtrick_Socail_Wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.Fbtrick_Socail_Wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
#sidebar .widget {
margin-bottom: 35px;
}
.social_item {
position: relative;
display: block;
height: 107px;
padding: 10px;
overflow: hidden;
}
.social_icon {
font-size: 2rem;
display: inline-block;
margin-top: 5px;
margin-bottom: 9px;
}
.social_num {
line-height: 44px;
width: 100%;
height: 41px;
font-size: .875rem;
display: inline-block;
}
a.social_item.social_facebook {
background: #3F5B9B;
}
.fa-facebook.social_icon ~ .social_num {
background: #2E4372;
}
li.Fbtrick_Socail_Wrapper:hover .fa-facebook.social_icon ~ .social_num {
background: #3F5B9B;
}
li.Fbtrick_Socail_Wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #1C97DE;
}
.fa-twitter.social_icon ~ .social_num {
background: #1571A5;
}
li.Fbtrick_Socail_Wrapper:hover .fa-twitter.social_icon ~ .social_num {
background: #1C97DE;
}
li.Fbtrick_Socail_Wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background: #E22020;
}
.fa-youtube.social_icon ~ .social_num {
background: #B31919;
}
li.Fbtrick_Socail_Wrapper:hover .fa-youtube.social_icon ~ .social_num {
background: #E22020;
}
li.Fbtrick_Socail_Wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #E82159;
}
.fa-dribbble.social_icon ~ .social_num {
background: #B51A45;
}
li.Fbtrick_Socail_Wrapper:hover .fa-dribbble.social_icon ~ .social_num {
background: #E82159;
}
li.Fbtrick_Socail_Wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background: #E86321;
}
.fa-rss.social_icon ~ .social_num {
background: #C2521B;
}
li.Fbtrick_Socail_Wrapper:hover .fa-rss.social_icon ~ .social_num {
background: #E86321;
}
li.Fbtrick_Socail_Wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #E82C2C;
}
.fa-google-plus.social_icon ~ .social_num {
background: #BF2424;
}
li.Fbtrick_Socail_Wrapper:hover .fa-google-plus.social_icon ~ .social_num {
background: #E82C2C;
}
li.Fbtrick_Socail_Wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #0275B6;
}
.fa-linkedin.social_icon ~ .social_num {
background: #02669E;
}
li.Fbtrick_Socail_Wrapper:hover .fa-linkedin.social_icon ~ .social_num {
background: #0275B6;
}
li.Fbtrick_Socail_Wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #8E714D;
}
.fa-instagram.social_icon ~ .social_num {
background: #6F583C;
}
li.Fbtrick_Socail_Wrapper:hover .fa-instagram.social_icon ~ .social_num {
background: #8E714D;
}
li.Fbtrick_Socail_Wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon ~ .social_num {
background: #AB1B21;
}
li.Fbtrick_Socail_Wrapper:hover .fa-pinterest.social_icon ~ .social_num {
background: #CA2027;
}
li.Fbtrick_Socail_Wrapper:hover .social_pinterest {
background: #AB1B21;
}
a.social_item.social_tumblr {
background: #3a5c7e;
}
.fa-tumblr.social_icon ~ .social_num {
background: #36465D;
}
li.Fbtrick_Socail_Wrapper:hover .fa-tumblr.social_icon ~ .social_num {
background: #3a5c7e;
}
li.Fbtrick_Socail_Wrapper:hover .social_tumblr {
background: #36465D;
}
</style>

<div class="Fbtrick_social_counter">
<ul class="social-counter">
<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_facebook" href="Facebook link">
<i class="fa fa-facebook social_icon"></i>
<br /><span class="social_num">2153</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_twitter" href="Twitter Link">
<i class="fa fa-twitter social_icon"></i>
<br /><span class="social_num">1151</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_youtube" href="Youtube Link">
<i class="fa fa-youtube social_icon"></i>
<br /><span class="social_num">2156</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_dribbble" href="Dribble Link"><i class="fa fa-dribbble social_icon"></i>
<br /><span class="social_num">1487</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_linkedin" href="Linkedin Link"><i class="fa fa-linkedin social_icon"></i>
<br /><span class="social_num">556</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_google-plus" href="Goole+ Link">
<i class="fa fa-google-plus social_icon"></i>
<br /><span class="social_num">2034</span></a></li>

<li class="Fbtrick_Socail_Wrapper"><a class="social_item social_instagram" href="Instagram Link"><i class="fa fa-instagram social_icon"></i>
<br /><span class="social_num">1525</span></a></li>

<li class="Fbtrick_Socail_Wrapper">
<a class="social_item social_rss" href="Rss feed Link">
<i class="fa fa-rss social_icon"></i>
<br /><span class="social_num">5124</span></a></li>
</ul>
</div>

Note :- Change the red color text with your Social Links and Blue Numbers with the followers you have on your Socail Sites


If you face any Problem In this Trick Must comment.
To get more cool trick of Candy Crush Saga Subscribe Us.


Share this

Related Posts

Previous
Next Post »