Clean Rounded social media widget for blogger

Has you might have known,social media connect widget is essential for your blog,when visitors visits your blog and they followed you on Facebook,Twitter and so on,it creates bond between you and your blog visitors which will result to frequent visit on your site or buying the products you market

        Just because of this, I created this simple social media connect widget,

• It's clean 
• Round in shape 
• Fast loading 
• It has facebook,Twitter,rss,google Plus, LinkedIn,pinterest icons 

To add the social media connect widget
follow this simple steps 

===)>  login to blogger dashboard and click layout 

===)> select gadget where you want the widget to be.... Then select html/javascript 

===)> copy and paste this below code into the html box 

<style>
/***** Social Profile Icon Widget CSS *****/
.social-profile-icons { margin: 20px 0 0; overflow: hidden; }
.social-profile-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; }
.social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
.social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uVVsvwCTkqs_CBKeUk7s92mj_X2qLaTeFdccqtpyLl0aTE3RXKlic2aM416i239ml7w0-LjS2NDkVtu4rtrkspepk_eg5RelLuJYE9TzT5sbDt9q79_6Nb6SqM_XpUlHfUd0w7aeDJ2I/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; }
.social-profile-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; }
.social-profile-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; }
.social-profile-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; }
.social-profile-icons ul li.social-linkedin a { background-color: #007bb6; background-position: -125px 3px; }
.social-profile-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; }
.social-profile-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; }
.social-profile-icons ul li a:hover { background-color: #333; }
</style>
<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a href="FACEBOOK URL" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="TWITTER URL" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="GOOGLE+ URL" title="Google+">Google+</a></li>
<li class="social-linkedin"><a href="LINKEDIN URL" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a href="PINTEREST URL" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="RSS LINK" title="RSS">RSS</a></li>
</ul>
</div>

            How to customise 

Replace the highlighted in blue has follows 

• Replace the FACEBOOK URL with your facebook account or fan page url 
• Replace TWITTER URL with your Twitter profile url 
• Replace GOOGLE + url with your Google plus account url 
• Replace LINKEDIN URL  with it profile url 
• Replace PINTEREST URL with your pinterest profile url 

Save the widget and save the layout 

That's all 

If you had any problem using this widget, you can contact me using the comment box