Saturday, December 22, 2012

0 CSS3 Thread Out Social Sharing Widget

         Social Sharing Button is a very important part of a website because it can draw many visitors to you by the behavior of its and can stuck your traffic to you by not loosing them. So adding a more creative and attractive Social Sharing button with CSS will be very helpful to you to generate your web traffic and to keep them as plugged to your site.

           This widget is created using Pure CSS3 and ShareThis social sharing plugin. This widget have 4 buttons: Facebook Like button, Google +1 button, Tweet button and main ShareThis button' for more social sharing links.


Add CSS3 Thread Out Social Sharing Widget in Blogger

1.Login to Blogger Dashboard > Design tab > Edit Html

(You can also use this as a widget by adding this code to HTML/Java Script Gadget)

2. Click on Expand Template widgets check box

3. Search for <div class=’post-footer-line post-footer-line-1′> HTML tag

4. And Put Below Code immediately after it

<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 {
-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;
<div class="ringMenu">
<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">stLight.options
({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script>
<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>

No more customizations needed for this CSS3 Thread Out Social Sharing Widget CSS3 Thread Out Social Sharing Widget for Blogger for Blogger, but if you want you can replace ShareThis script with your regiestered ShareThis account script.

Then you are Done here !

  Warning  :  Don't Copy from this Post Without Linking Back to the Post


Post a Comment