Oct 5, 2015

Add Ribbon Style Social Media Widget to Blogger

data:blog.title
A Blogger Always want a good looking blog for his blog and for a good looking blog we always want some extra features, extra (good looking) Blogger Widgets, and a good template. Till, Now My Blogger Guides published hundreds of Blogger Widgets for all of you. We have shared many sidebar widgets, navigation/menu bars, subscription widget, Social media widgets, Social Sharing Widgets, footer widgets, Block-quote style widgets and a lot of other widgets for your blogger blog.
Ribbon Style Social Media Widget for 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

How To Add Ribbon Style Social Media Widget to Blogger

By using this blogger widget you can link to Facebook, Pinterest, google plus, RSS, Twitter and LinkedIn. If you want to add these buttons in your blogger blog then read complete guide below. Follow all steps carefully which I've mentioned below.

Steps For Adding Ribbon Style Social Media Widget to Blogger

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

    Conclusion:

    So above guide is about How To Add Ribbon Style Social Media Widget to Blogger Blog Hope this recommended social media blogger widget increase your page views and also attract your readers. If you have any query or facing any problem then drop a comment below. Hope you will like this blogger widget. Do share on Blogging communities and with your blogger friends.
    Thank You! Stay Blessed!

    No comments:

    Post a Comment

    We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.