May 07, 2013
Tuesday, May 07, 2013
2 comments

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..



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:



    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 ,

    Tagged with :

    Manjunath.G (MJN) is a Blogger, web designer and developer .. He has a passion towards Programming , Web designing and also he loves Technology..

    2 comments:

    1. Im Posting This Post To MY Blog With Your Backlink Link ! :)

      ReplyDelete
    2. Ok Mohammed..Thanks and Join Us.. :)

      ReplyDelete

     
    Toggle Footer
    Top