How to Add Social Media Buttons to Blogger Sidebar

Adding follow us or connect us social media buttons to your blog is a “must do” stuff, that every bloggers should adopt to their blog or website.
add social media icon buttons blogger sidebar
If you are new to blogging and looking for tools to grow your social media reach and followers, then you can use it as a social media marketing strategy to grow your blog.



In the last 5 years analysis, social media was the 2nd largest source to gain high amount of visitor/ readers/ followers to your blog, which comes after organic traffic and the best part about this is, it’s totally free of cost.

Why to use follow us buttons?

As I told you above, there as many benefits of using it on your site. Below ae some quick pros that you should know before applying it to your blog.
  • Increase your followers/fans in more faster way.
  • Gain referral traffic/audience to your blog posts.
  • Create Facebook pages and grow your brand.
  • Gain trust and create engagement between you & your readers.
  • Turn your first time visitors to a life time subscriber.
You'll get more benefits after implementing it to your blogger site.

Ways to add follow us social buttons?

There are mainly two ways by which you can install social widget to your blog.

1. You can add custom JavaScript code’s to HTML widget on your layout page.
2. You can use short scripts from another social media tool provider websites to show follow us buttons on your site. This method can be little tricky, during the process you might need to change your template codes.

Below are the 5 best blogging tool provider websites.
1. Addtoany
2. Addthis
3. Sharethis
4. Jotform
5. Power.io

Adding Social Media icons using Custom JavaScript Codes

Copy the below codes and paste it on your layout page's HTML gadget. If you're confused? read the below post.

• Blogger Widgets: How to Add Html Codes in Blogger

Note: Before pasting the below codes to your blog, change the blue codes with your actual social media account url.

1. Horizontal Social icons with names
 Horizontal Social icons
Horizontal Social media icons with names
<a href="your url goes here"><div class="fb-icon-bg"></div>
    <div class="fb-bg"></div>
  <a href="your url goes here">
  <div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
  <a href="your url goes here">  <div class="g-icon-bg"></div>
    <div class="g-bg"></div>
  </a>
<a href="your url goes here">
  <div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
  </a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
 background: #354f88;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.fb-icon-bg:after {
 content: "\f09a"; font-family: FontAwesome;
  display: block;
  padding: 9px 10px 5px 15px;
color:#fff;
}
.fb-bg {
 background: #3b5998;
 display: block;
 height: 37px;
 margin: 0 0 10px 41px;
}
.fb-bg:after {
 color: #fff;
 content: "Follow Us on Facebook";
 height: 37px;
 left: 8%;
 position: relative;
 top: 22%;
 width: 41px; 
}
.fb-bg:hover{
  cursor: pointer;
}
.fb-bg:active{
  background: #354f88;
}
/* Twitter */
.twi-icon-bg:after {
 content: "\f099"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 11px;
color:#fff;
}
.twi-icon-bg {
 background: #40a2d1;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.twi-bg {
 background: #45b0e3;
 height: 37px;
 margin: 0 0 10px 41px;
}
.twi-bg:after {
 color: #fff;
 content: "Follow Us on Twitter";
 height: 37px;
  left: 11%;
 position: relative;
 top: 22%;
  width: 41px; 
}
.twi-bg:hover {
  cursor: pointer;
}
.twi-bg:active {
  background: #40a2d1;
}
/* Google+ */
.g-icon-bg:after {
 content: "\f0d5"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 13px;
color:#fff;
}
.g-icon-bg {
 background: #ce3e26;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.g-bg {
 background: #de4c34;
 height: 37px;
     margin: 0 0 10px 41px;
}
.g-bg:after {
 color: #fff;
 content: "Follow Us on Google+";
 height: 37px;
 left: 10%;
 position: relative;
 top: 22%;
 width: 41px; 
}
.g-bg:hover {
  cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 0 10px 41px;
}
.lin-bg:after {
    color: #fff;
    content: "Follow Us on Linkedin";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-left: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "Follow us on Instagram";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
</style></a>
2. Square social icons with hover
Social networking icons
Square Social icons- Source: w3schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-tumblr {
  background: #2c4762;
  color: white;
}
.fa-rss {
  background: #ff6600;
  color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
<a href="your url goes here" class="fa fa-facebook"></a>
<a href="your url goes here" class="fa fa-twitter"></a>
<a href="your url goes here" class="fa fa-google"></a>
<a href="your url goes here" class="fa fa-linkedin"></a>
<a href="your url goes here" class="fa fa-youtube"></a>
<a href="your url goes here" class="fa fa-instagram"></a>
<a href="your url goes here" class="fa fa-pinterest"></a>
<a href="your url goes here" class="fa fa-tumblr"></a>
<a href="your url goes here" class="fa fa-rss"></a>      
</body>
</html>
3.Rounded social icons with hover
social media icons
Rounded icons- Source: w3schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-tumblr {
  background: #2c4762;
  color: white;
}
.fa-rss {
  background: #ff6600;
  color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
<a href="your url goes here" class="fa fa-facebook"></a>
<a href="your url goes here" class="fa fa-twitter"></a>
<a href="your url goes here" class="fa fa-google"></a>
<a href="your url goes here" class="fa fa-linkedin"></a>
<a href="your url goes here" class="fa fa-youtube"></a>
<a href="your url goes here" class="fa fa-instagram"></a>
<a href="your url goes here" class="fa fa-pinterest"></a>
<a href="your url goes here" class="fa fa-tumblr"></a>
<a href="your url goes here" class="fa fa-rss"></a>      
</body>
</html> 
Adding Social Media Codes to Blogger Sidebar
1. Copy the given codes above and head over to blogger > layout page.

2. In the the sidebars click on add a gadget.
Add Social Media Codes Blogger Sidebar
3. Click HTML/JavaScriptAdd : to add third-party functionality or other code to your blog.
Adding Social Media Codes Blogger Sidebar
4. Paste the codes in the content box, add a title and click save.
Add Social Media Code Blogger Sidebar
5. Click save arrangements and you're done!
Adding Social Media Codes to Blogger
Conclusion
Adding social networking follow us or join us buttons to your site is a good technique to boost your business. You can easily grow the numbers of subscribers on your blog via these widget.

Did this widget worked on your blog? let me knnow in the comment box below and also subscribe us for more latest updates!

No comments:

Recently Published Posts