Add Ribbon Style Social Media Widget to Blogger

Ribbon Style Social Sharing Widget

In this tutorial I’m going to share Ribbon Style Social Media Widget For Your Blogger Blog. By using jquery, we can do more  thing  to our blog. Above I’ve also provide you an screenshot of this widget. I’m using CSS, Jquery, HTML Language for  this tutorial. Good looking social media widgets can increase your followers and also attract your readers.

Demo Click here

• Go To Blogger Dashboard.
• Select Blog >> Go To Template >> Edit HTML
• By pressing CTRL+F Search for ]]></b:skin> tag.
• Now Copy below code and paste it just above of this tag.

/*—mybloggerguides.com Animated Social  Widget —*/
.mbg-wrapper{
 padding: 0;
 width: 535px;
 height: 70px;
 margin: 80px auto 30px auto;
}
.mbg-wrapper ul{
 float: left;
margin-left: -45px;
}
.mbg-wrapper ul a{
 display: block;
 width: 68px;
 height: 110px;
 margin:  -10 -24 px;
 outline: none;
 background: transparent url(http://2.bp.blogspot.com/-dutAb1Q817s/VhI22hvkHdI/AAAAAAAADtU/Jd5aZ0_Y5eY/s1600/mybloggerguides.com-ribbon.png) no-repeat top left;
 text-indent: -9000px;
 position: relative;
}
.mbg-wrapper ul .mbg-gplus{
    background-position: 0px 0px;
}
.mbg-wrapper ul .mbg-twitter{
    background-position: -68px 0px;
}
.mbg-wrapper ul .mbg-pinterest{
    background-position: -136px 0px;
}
.mbg-wrapper ul .mbg-facebook{
    background-position: -204px 0px;
}
.mbg-wrapper ul .mbg-linkedin{
    background-position: -272px 0px;
}
.mbg-wrapper ul .mbg-rss{
    background-position: -340px 0px;
}
.mbg-wrapper ul a span{
margin-bottom: 50px;
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-family: Shanti, Arial, Helvetica, sans-serif;
 font-weight: 400; 
 font-size: 14px;
 color: #2f6986;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #2f6986;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.mbg-wrapper ul a span:before,
.mbg-wrapper ul a span:after{
margin-top:20px;
 content: ”;
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}
.mbg-wrapper ul a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #2f6986;
}
.mbg-wrapper ul a:hover span{
 opacity: 0.9;
 bottom: 70px;
}

• Now Save Template.
• Now Go To Layout >> Add A Gadget.
• Select HTML/JavaScript.
• Paste below code.

<div class=”mbg-wrapper”>
   <ul><a class=”mbg-gplus ” href=”https://plus.google.com/userid”><span>Google Plus</span></a></ul>
    
   <ul><a class=”mbg-twitter” href=”http://twitter.com/userid”><span>Twitter</span></a></ul>
    
   <ul><a class=”mbg-pinterest” href=”http://pinterest.com/userid/”><span>Pinterest</span></a></ul>
    
   <ul><a class=”mbg-facebook” href=”http://www.facebook.com/userid”><span>Facebook</span></a></ul>
    
   <ul><a class=”mbg-linkedin” href=”Linkedin-URL”><span>LinkedIn</span></a></ul>
    
   <ul><a class=”mbg-rss” href=”http://feeds.feedburner.com/userid”><span>Feeds</span></a></ul>
   </div>

• Now change all highlighted colors into yours.
• You can hide any link by removing <ul>…</ul> section. It can not adjust in sidebar so it is highly recommend to remove two <ul>…</ul> section from above HTML part.
• Now Save HTML/JavaScript.
• That’s It. You have done it.
• Now open your blog in new tab and enjoy this widget.

Our Recommended Blogger Widgets

1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
5. Cute & Stylish Email Popup Subscription Widget.