CSS3 Thread Out Social Sharing Widget for Blogger

When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. ;)

Whether its twitter or google plus, social media probably has a huge impact on your traffic. I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of Social Sharing Widget on hover.

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.

CSS3 Thread Out Social Sharing Widget for Blogger

Note: This Blogger Social Sharing widget animated zoom out feature will only work on latest Browsers and won’t work with Internet Explorer ( not tested with IE 10 ).

Live Demo

Add CSS3 Thread Out Social Sharing Widget in Blogger

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

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

4. Save your Template and Done!

Related Widget : Animated Social Sharing Widget with Cool Hover!

Customization

The demo and post codes are same. You have to adjust this widget with your blog design ( how do I know your blog design look like ;) ).  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.

Once you’ve done that, save everything and check it out! Thanks for reading, and if you liked this little tutorial and socal sharing widget don’t forget to share. It really helps. :D

Click here for more stylish widgets


Article by

Hi! I am Abu Shaleh. I am 17 years old Blogger and a Student. I am a CSS lover and designer, you can find my Articles in My Blog and you can follow me @Twitter.

Abu has written 1 awesome articles for us.

Write for us Guest Post?

Comment below, let me know what do you think?

26 Comments so far add one

  1. hi Abu Shaleh its a nice widget but what if you shared a widget for wordpress as well, can we use it in wordpress or not….

  2. its awesome , i will try and use it in my blog, it s great
    sahil recently posted..Download Android App to PCMy Profile

  3. I read a blogger article about after a month. :-D However, nice article for all blogger.com lovers. :-). But for me WordPress is 10 times better than blogger.
    Raplus recently posted..3 Blogging Lessons You Can Learn From a Chess GameMy Profile

  4. Very Innovative Widget its great it would be more great if you had also made it for wordpress.

  5. Good One. which Place is more suitable for this social sharing widget to put?
    kamran recently posted..Mash 2 Blogger Template Adopted From WordPress Free For AllMy Profile

  6. Awesome Widget Shaleh but unfortunately I am using WordPress so please will you make the plugin for WordPress too.
    Raja Naeem recently posted..Eset NOD32 Antivirus 5 and Mobile Security free for 90 daysMy Profile

  7. That’s a really nice one. But where to use this one in a blog? I think inside your content…is it?
    Santanu recently posted..Rajasthan Tourism Guide – Where To Go, What To See…Part 2My Profile

  8. really cool share button.. i like the animation and creativity..
    Thnx for sharing..
    Ashish recently posted..HTC Desire SV SpecificationsMy Profile

  9. Well, this is really an unique widget. I want to apply in my WP blog but will it work in WordPress ?
    Parigyan recently posted..How To Backup WordPress Blog to DropBox?My Profile

  10. Hamza Sheikh says:

    It really looks great. I have check the demo of social sharing widget. It’s great.
    Hamza Sheikh recently posted..10 Tips To Improve Google Author Rank Before PenalizationMy Profile

  11. Gautham Nekkanti says:

    Awesome clean widget for social sharing buttons, Thanks for sharing
    Gautham Nekkanti recently posted..Top 10 Best Free Cloud StorageMy Profile

  12. Add the social share buttons below post titles in blogger’ which make the blogger to some good and new look.
    Abu Shaleh thanks youe post

  13. Nice post, cool design… I am looking for a nice christmas widget
    Owuda recently posted..3 Top websites for job seekers in NigeriaMy Profile

  14. Surely it is a great widget but alas i am on word press and cant use that
    HAMID ROSHAAN TAHIR recently posted..How to make Money online through SquidooMy Profile

  15. Nice and cool social sharing widget. It can enhance the option of sharing and it is unique in style. :)
    Most of the sharing widgets are straight but it is in round shape. :)

    Thank you
    jeniffer recently posted..Indulge your Senses with only Top-Selling Herbal Incense ProductsMy Profile

Speak Your Mind

CommentLuv badge