sidebar metro social subscription buttons

In this post I am going to share with you a great metro style clean and beautiful social subscription widget. You can add this widget in your blog/website sidebar to make your visitors your followers on three most popular social media websites named as Facebook, twitter, Google plus and social subscription by feed burner.

Live Demo

How to add this widget in Blogger

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it.

<style>
.socialicons_widget_sidebar li {
    float: left;
    width: 147px;
    height: 147px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-bottom: none;
}
.socialicons_widget_sidebar li a {
    line-height: 1px;
    display: block;
}
.socialicons_widget_sidebar li a:hover img {
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.socialicons_widget_sidebar li a span {
    display: none;
}
.socialicons_widget_sidebar li.rss-icon {
    margin: 0 6px 6px 0;
}
.socialicons_widget_sidebar li.facebook-icon {
    margin: 0 6px 0 0;
}
</style>
 
<div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar">
<ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;">
 
<li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="http://www.twitter.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVS6i8m0ajTXYNPp_pNt9rQFqUbl0aP9XgQroTbHJ8fKPAse8Z-kalTLv4wXKMyK7SOMO24Dz2WsXMtj2xV6gKWKYZug1WuLyJ14bAvCWXYohaKkHco7DHnnRhm4pXhgGZ4EgrXpx4YUup/s1600/twitter.png" width="147" height="147"><span>Twitter</span></a></li>
 
<li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="http://www.facebook.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhZBaXE1SakoB5i1s-cgHesRJSFMFqwkrkMrXefswVVb2ISPK5Yy60QDP4wLjJnN78HlS7ReCGC_0dKL2nuBJrzmtEbwiomQ6PLZAlgpLzwF0Yqsc4lYVPZ7W_gzMqyumY_SVA8mf-696/s1600/facebook.png" width="147" height="147"><span>Facebook</span></a></li>
 
<li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="http://feeds.feedburner.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XpA0oAseItblW5IXxCAPJ62pf3kh6HQVUtMno16pHdaFsTZJtk_gkw-yk2UYNhIZ7WCVlDOPuBFzpn9KLtJZdWmgLf9-at-nIPM7qhqa9PXEfr6DtjQ7Ffe18e0nxnonlJW-hY5_NYvq/s1600/rss.png" width="147" height="147"><span>Rss Feed</span></a></li>
 
<li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="https://plus.google.com/u/0/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISvVJi3QRv0hymAJCIUv3kt7Y8Yqpi5oC_6v4ljVtoPgOIS-lHmgFRCp1RUEC8xHpaUviC80Xo7VDp8bQ8O8AN3HcYpOW-60MMbeKdH5dsPPRhvF_fSDnlqLjTB4u6s_qP_4EaxPN-3S7/s1600/google.png" width="147" height="147"><span>Google+</span></a></li>
 
</ul>
</div>

Customization:

You just need to replace # with your own social profiles links and you are done…..!

Enjoy..