Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger

Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger

As you all know My First Attempt in CSS3 was and also is "Animated Metro UI Social Profile And Search Box with Zoom & Glow Effects Widget v1.1 For Blogger" .. So I am here Today with another Social Profile Widget with Metro Ribbon UI Win 8 Style..

Let's Begin !!!!!!

 How To Add Metro Ribbon UI Social Profile Widget Into Blogger :

• First Go to "Blogger" and then go to your Blog "Dashboard"..
• Now go to "Layout Section" which is in Left side of your Blog "Dashboard"..
• Now click on "Add Gadget" .. Scroll Down and Click on "HTML/JavaScript"..
• Now Paste the Below Code in it..

<style>
.mjn-social_ribbon_icons a{
    width:48px;
    height:100px;
    margin-top:10px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0Rgwtma-uTNYIqHVch5s9aCe1-XaJ4xUta6PDpkbLMZ1tMd4aKE3REMF5WkXr0jN_OM-Adnqj0M8Tl1yIIdvcJTb_P5mwnqYIGp5siJSJ_hscHpkptrYCf7EtIeBT-N5g7nGMDy2AB8/h120/Twitter+R.png'); margin-bottom:10px; }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj8_S51tqpkksdwDBGyqnjtua-BvQ9q-Dj5RlRY0wGW4_swQttKz6x3_LXlrJB2tdo6XM7VZBXj-f5H21ZEQX1X2QWTds1CdhTCMDT33atdlJ3N8oPEIbfWLjWY6lyWjAOHy8PdXTNXo/h120/Facebook+R.png'); margin-bottom:10px; }
.google{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7A5MypJ6qvctt2Gqce7agyiTqNxPEwzpaaSQvqT9QpFqMvH7TfDR9anC8XcGsOjaL7ZDcqpPiAvVE6VRFtXsYGKn8Hk27x7TehhTpPdS5yWVgoLef4rYqtsJwpffpPoeCZSrY2aQXMto/h120/Google++R.png'); margin-bottom:10px; }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uQsxZdIGIZ5jggVJXf4qQ_weW82y4NjRnh9YoqNKenZlWhC3Iwwmfc4tfRzFEDjvX0DzycJL2ZPIkDV0bP5sJpYu0pDmfBfewgXBMJbTkyXVQ_vkDNra4m008tHUP2qkoEKbJiiDZLY/h120/RSS+R.png'); margin-bottom:10px; }
.twitter:hover{
border-top: 2px solid #fff ;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

}
.facebook:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.google:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.rss:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
</style>
   
<div class="mjn-social_ribbon_icons">
<a href="http://www.facebook.com/youlink" class="facebook" title="Follow us on Facebook">Facebook</a>
<a href="http://www.twitter.com/youlink" class="twitter" title="Follow us on Twitter">Twitter</a>
 <a href="https://plus.google.com/u/0/yourlink" class="google" title="Follow us on Google+">Google+</a>
<a href="http://feeds.feedburner.com/yourlink" class="rss" title="Subscribe Us on RSS">RSS</a>
    </div>

Now click save..That's it ..all Done!!

 Customization :

• Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..