How to Add Social Media and Newsletter Buttons for Blog of Blogger

Sometimes you would like to relinquish an additional boost to your social media subscription rate by adding social media buttons to your blog (blogger/blogspot). Today, we've got these cute very little buttons with short description that you simply will add anyplace on your blogger blogs (or WordPress etc as you wish). tho' the foremost applicable place to feature these buttons will either be below navigation buttons or within the footer.

We'll discuss each the ways in which you'll follow to try and do so.

• Twitter Follow us
• Facebook Become our fan
• Google+ Join our circle
• RSS Subscribe now
• Newsletter Get latest updates

How to Setup?

Navigate to your Blogger blog Dashboard >> Template >> Edit HTML. Search for </body> by using Ctrl+F

Now simply add the following code above the </body> tag.

<div align="center">
<ul class="footer-social-icons">
<li>
<a class="icon-twitter" rel="external" href="Your Twitter Link">
Twitter
<span>Follow us</span>
</a>
</li>
<li>
<a class="icon-facebook" rel="external" href="Your Facebook Page link">
Facebook
<span>Become our fan</span>
</a>
</li>
<li>
<a class="icon-google" rel="external" href="Your Google+ Link">
Google+
<span>Join our circle</span>
</a>
</li>
<li>
<a class="icon-rss" rel="external" href="Your Feedburner Feed Link">
RSS
<span>Subscribe now</span>
</a>
</li>
<li>
<a class="icon-email" rel="external" href="Your Feedburner Widget Subscription link">
Newsletter
<span>Get latest updates</span>
</a>
</li>
</ul>
<style>
.footer-social-icons {
border-top: 4px solid #333333;
overflow: hidden;
padding: 15px 0;
width: 100%;
}
.footer-social-icons a, .footer-social-icons a:visited {
color: #000000;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 32px;
padding: 0 0 0 40px;
width: 143px;
}
.footer-social-icons a:hover {
color: #008AB2;
}
.footer-social-icons a span {
color: #999999;
display: block;
font-size: 11px;
font-weight: normal;
}
.footer-social-icons .icon-twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-b0vSeAIXstOdKDFj9C_LIy4JzJR4FI1-KQJY1ciZ_jr9pBEepedkaLHyUDc0-Pkptmdu6A-aUZPLB1wjYoiaZqGjJ683-Wrr0JzeqRLDzjNH1_LQMFlUPzOeA6XSPhzNdVvB7PxVGc/s1600/ico-footer-twitter.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQYp7NFAtrHHjdTJiSoS2ny20TkF92osheo9vlwubrhneMFcuY2yNTMXsEDfuxec0hApG34n6u7OdB0GDq7lN6HqUfOGVeAv0G2a0IYTldDHE0j6uZq6wkKGls25sPW-bOMPW1NDD2aYI/s1600/ico-footer-facebook.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-google {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KrnLnbJddQNGvjtgDGu_Ivefu3DFafGHZdZzt0FkjbIg9bAtt7h327OzZ5mFMq_vJlU1UAwaSxPaXywQTbenDG4HFkGP8R50Xv6wGeQ9ek2iTpFRsCTqK_mIcGbBc5bH91jIzOX81gQ/s1600/ico-footer-google.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjht0SQ1ugvpoN6ZvP3NiI7D92qe0RW7WpzjlKs03bB4nwmgCRF800wSbDdP52mwhHAuO62e4F6RhckN0hspv7EFhhUVtRlTQfayYNThiqYulXep8XUTxmVc657tr1Vi8nk8MkaaF3072Y/s1600/ico-footer-rss.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6M4J4ZEJjJHpOUteQu8rwhNm2J83Zk6PPOTm0kQMEIeDRFl1AwzZDC2KKxHisUpca6cdG42Hn6IusrV85It_z_HcSzQvnIXZkqfpPK1nHlvMbI7YuqoLs1HqR0ChcV3NngRfghJSrGvE/s1600/ico-footer-email.png") no-repeat scroll 0 0 transparent;
margin-right: 0;
}
ol, ul {
list-style: none outside none;
}
</style>
</div>

Adding your Social connections link

Now merely add your social media links with within the highlighted sections and hit save example. Thats all! you will see the convenience in place.

Hope you likable the lovable very little buttons. till next time fellows. Take care.