Social sites Share Button Widgers

Social sites Share Widgets

Social media is a great and power full way to increase traffics on any sites or blogs.
In this widget, four buttons facebook share, google pluse, twitter share button and a main share button, This button for more social sharing buttons.

Steps to add this widgets on blog

1. Login to blogger Dashboard.
2. Design tabe
3. Select Edit Html
4. Search for <div class"post-footer-line"> Html tag
5. Paste all the below code here.

Live Demo

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> .ringMenu { width: 100px; margin: 150px auto; } .ringMenu ul { list-style: none; position: relative; width: 100px; color: white; } .ringMenu ul a { color: white; } .ringMenu ul li { -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; } .ringMenu ul li a { display: block; width: 100px; height: 100px; background: rgba(50,50,50,0.7); text-align: center; line-height: 100px; -webkit-border-radius: 50px; border-radius: 50px; font-size: 20px; } .ringMenu ul li a:hover { background: rgba(230,150,20,0.7); text-decoration: none; } .ringMenu ul li:not(.main) { -webkit-transform: rotate(-180deg) scale(0); -moz-transform: rotate(-180deg) scale(0); -o-transform: rotate(-180deg) scale(0); transform: rotate(-180deg) scale(0); opacity: 0; } .ringMenu:hover ul li { -webkit-transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); transform: rotate(0) scale(1); opacity: 1; } .ringMenu ul li.top { -webkit-transform-origin: 50% 152px; -moz-transform-origin: 50% 152px; -o-transform-origin: 50% 152px; transform-origin: 50% 152px; position: absolute; top: -70px; left: 50px; } .ringMenu ul li.bottom { -webkit-transform-origin: 50% -52px; -moz-transform-origin: 50% -52px; -o-transform-origin: 50% -52px; transform-origin: 50% -52px; position: absolute; bottom: -70px; left: 50px; } .ringMenu ul li.right { -webkit-transform-origin: -52px 50%; -moz-transform-origin: -52px 50%; -o-transform-origin: -52px 50%; transform-origin: -52px 50%; position: absolute; top: 10px; right: -50px; } .ringMenu ul li.left { -webkit-transform-origin: 152px 50%; -moz-transform-origin: 152px 50%; -o-transform-origin: 152px 50%; transform-origin: 152px 50%; position: absolute; top: 10px; left: -50px; } </style> <div class="ringMenu"> <script type="text/javascript">var switchTo5x=false;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script> <ul> <li class="main"><a href="#main">SHARE</a></li> <li class="top"><span class='st_fblike_vcount' displayText='Like'></span></li> <li class="right"><span class='st_sharethis_vcount' displayText='Share'></span></li> <li class="bottom"><span class='st_plusone_vcount' displayText='+1'></span></li> <li class="left"><span class='st_twitter_vcount' displayText='Tweet'></span></li> </ul> </div> </b:if>

Save your tamplete finish.