Ribbon style Social Sharing Widget For Blogger

0
Ribbon style Social Sharing Widget For Blogger
In this tutorial i'm going to explain how to add ribbon style social media follow buttons with awesome effect,this widget have six social media profile sharing links using CSS and HTML for this gadget,it will add attractive look to your website or blog.




DEMO


1.Log in to blogger account.
2.Now select "Template".
3.Click EDIT HTML Button.
4.Find this code  by using Ctrl+F  ]]></b:skin>
5.Paste below code Before
<style>
/*---bloggersstand.blogspot.com Social  Widget ---*/
.bt-wrapper{
 padding: 0;
 width: 535px;
 height: 70px;
 margin: 80px auto 30px auto;
}
.bt-wrapper ul{
 float: left;
margin-left: -45px;
}
.bt-wrapper ul a{
 display: block;
 width: 68px;
 height: 110px;
 margin:  -10 -24 px;
 outline: none;
 background: transparent url(http://1.bp.blogspot.com/-d7whKSAmyHY/UG0J8CDV-cI/AAAAAAAAEoA/Bcl9B6t2T74/s1600/bloggertrix%2B-.png) no-repeat top left;
 text-indent: -9000px;
 position: relative;
}
.bt-wrapper ul .bt-gplus{
    background-position: 0px 0px;
}
.bt-wrapper ul .bt-twitter{
    background-position: -68px 0px;
}
.bt-wrapper ul .bt-pinterest{
    background-position: -136px 0px;
}
.bt-wrapper ul .bt-facebook{
    background-position: -204px 0px;
}
.bt-wrapper ul .bt-linkedin{
    background-position: -272px 0px;
}
.bt-wrapper ul .bt-rss{
    background-position: -340px 0px;
}
.bt-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;
}
.bt-wrapper ul a span:before,
.bt-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);
}
.bt-wrapper ul a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #2f6986;
}
.bt-wrapper ul a:hover span{
 opacity: 0.9;
 bottom: 70px;
}
</style>

6.Go to blogger and select Layout
7.Click Add Gadget and select 'HTML/Javascript"
8.Paste below code.

<div class="bt-wrapper">
   <ul><a class="bt-gplus " href="https://plus.google.com/107955298793879607964"><span>Google Plus</span></a></ul>
 
   <ul><a class="bt-twitter" href="http://twitthis.com/twit?url=http://www.bloggersstand.blogspot.com"><span>Twitter</span></a></ul>
 
   <ul><a class="bt-pinterest" href="http://pinterest.com/username/"><span>Pinterest</span></a></ul>
 
   <ul><a class="bt-facebook" href="http://www.facebook.com/sharer.php?u=http://www.bloggersstand.blogspot.com"><span>Facebook</span></a></ul>
 
   <ul><a class="bt-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>
 
   <ul><a class="bt-rss" href="http://feeds.feedburner.com/bloggersstand"><span>Feeds</span></a></ul>
   </div>

  • Change bloggersstand with your Feedburner ID .
  • Change http://www.bloggersstand.blogspot.com with your Facebook URL.
  • Change http://www.bloggersstand.blogspot.com with your Twitter URL.
  • Change URL with your Linkedin URL.
  • Change 115587840274121878323 with your google plus id.
  • Change Username with your pinterest username

9. Now save your 'HTML/Javascript'. Done !
Ribbon style Social Sharing Widget For Blogger,social media ribbon sharing box url publish with css and html using unique ribbon style gadget to your website or blog blogspot.
In this tutorial i'm going to explain how to add ribbon style social media follow buttons wi...
SUMMARY

Ribbon style Social Sharing Widget For Blogger,social media ribbon sharing box url publish with css and html using unique ribbon style gadget to your website or blog blogspot.

You Might Also Like:

We hope this article helped you to learn Ribbon style Social Sharing Widget For Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Ribbon style Social Sharing Widget For Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand