Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..

                           As you all know My First Attempt in CSS3 was and also is "Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger " .. So I am here Today with another Social Profile Widget which is one of "MY Own Creation" with Ribbon UI..

Live Demo of Ribbon UI Social Profile Widget..

RSS Google+ Twitter Facebook

So After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site..

Let's Begin !!!!!!

How to   Add Ribbon UI Social Profile Widget For 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/AVvXsEh5cZWCglw9zpTl1oIqn0D70tBduqPVbOw0w34sbj-T-BxFAyveMY5vS36JjbgGfUQNQocSV1YWuUhv86yDGdA21F1-M3Q7MCY2gQTMNGmXYM956Hwa9Q1bKOminPUFpsY38rlOKIIZ7Cs/h120/Twitter+R.png'); margin-bottom:10px; }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Xnm6fbHmiGWwtdMGKPdYUkvmwy0_nT79j7fmJ9nz11BlkgzE9vgtRSFFDe6Z9b-KWVPo7xCPPLT5faG3StKzq-TjrgVp_IdJ1XziWEdDBFBVq23xDMUVM6obRYOHKuAr4AtN5Cyg9iI/h120/Facebook+R.png'); margin-bottom:10px; }
.google{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NXo7mtrUaQnr0PhkaeqzWhp386D0K8mwJthpDge1XAq8nXyrSuiKk1_V8KlXpnbztcfqRzZ4f7BdbZ_re_KLr5Q7vjF30A87P_SPqvbfLJ741rrD2UKXb6uK7sn8AVQUZbJfEiMqFLk/h120/Google++R.png'); margin-bottom:10px; }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQaqdlqnh5dbmnCXrSwuXdPPKMJudrhZnXln7tENgghbH3godbtsFQOMxEgx2L85vRCfN_xCYrDShavZWb8In0-d5iO6aEOgRYrWvjHKzsmFFrw3igqP3bhQKzwmKeMDv2mD__bvy7nI/h120/RSS+R.png'); margin-bottom:10px; }
.twitter:hover{
border-top: 2px solid transparent;
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/mjntech" class="facebook" title="Follow us on Facebook">Facebook</a>
<a href="http://www.twitter.com/manjunathg17" class="twitter" title="Follow us on Twitter">Twitter</a>
 <a href="https://plus.google.com/u/0/116155905562588571799" class="google" title="Follow us on Google+">Google+</a>
<a href="http://feeds.feedburner.com/mjntech" 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.. 

Useful Note:

• You can Also  Edit this menu like Width,Colour etc using HTML Editor of our Blog   : HTML Editor..
• You can Use Hexadecimal Color Code  Generator to Replace Colors of our Blog : HexaDecimal Color Code Generator..

Important Note:

• You Can Comment If any Problem Persist.. or Need Help With This Widget..

I hope you have found this post helpful..

Don't forget to Subscribe , Comment and Share this post..

With Regard's ,

Manjunath.G..

.:MJN Tech:.