• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
All Blogging Tips

All Blogging Tips

Everything About Blogging

  • New Here?
  • Start a Blog
    • Grow Your Blog
    • Make Money Blogging
  • Tools I Use
  • Categories
    • Blogging
    • SEO
    • Affiliate Marketing
    • Make Money Online
    • WordPress
    • Free Traffic
    • How To
    • Reviews
  • Advertise
  • Contact
  • Work With Me

CSS3 Thread Out Social Sharing Widget for Blogger

Last Updated on April 25, 2016 by Abu Shaleh 26 Comments

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.

social sharing widget

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

Enjoyed reading? Share with your friends!

  • Facebook
  • Twitter
  • Pinterest

About Abu Shaleh

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.

Reader Interactions

26 Comments Leave Your Comment

  1. jeniffer says

    November 27, 2012 at 5:32 am

    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

    Reply
  2. HAMID ROSHAAN TAHIR says

    November 21, 2012 at 12:11 am

    Surely it is a great widget but alas i am on word press and cant use that

    Reply
    • Abu Shaleh says

      November 23, 2012 at 1:32 pm

      You can use it in wordpress too. I will make another updated widget for wordpress. :)

      Reply
  3. Owuda says

    November 19, 2012 at 1:08 am

    Nice post, cool design… I am looking for a nice christmas widget

    Reply
  4. shahadot says

    November 18, 2012 at 3:04 pm

    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

    Reply
  5. Gautham Nekkanti says

    November 17, 2012 at 11:30 pm

    Awesome clean widget for social sharing buttons, Thanks for sharing

    Reply
  6. Hamza Sheikh says

    November 17, 2012 at 2:14 pm

    It really looks great. I have check the demo of social sharing widget. It’s great.

    Reply
  7. Parigyan says

    November 17, 2012 at 8:28 am

    Well, this is really an unique widget. I want to apply in my WP blog but will it work in WordPress ?

    Reply
    • Abu Shaleh says

      November 18, 2012 at 9:18 am

      I will work with wordpress :)

      Reply
  8. Ashish says

    November 17, 2012 at 7:36 am

    really cool share button.. i like the animation and creativity..
    Thnx for sharing..

    Reply
  9. Santanu says

    November 17, 2012 at 4:38 am

    That’s a really nice one. But where to use this one in a blog? I think inside your content…is it?

    Reply
    • Abu Shaleh says

      November 18, 2012 at 9:17 am

      No Bro, Just below your blogs post.

      Reply
  10. Raja Naeem says

    November 16, 2012 at 11:04 pm

    Awesome Widget Shaleh but unfortunately I am using WordPress so please will you make the plugin for WordPress too.

    Reply
    • Abu Shaleh says

      November 18, 2012 at 9:16 am

      Thanks :) and i will try to make a wordpress plugin.

      Reply
  11. kamran says

    November 16, 2012 at 9:32 pm

    Good One. which Place is more suitable for this social sharing widget to put?

    Reply
    • Abu Shaleh says

      November 18, 2012 at 9:14 am

      Just after you Blogs Post Body.

      Reply
  12. K Bharath says

    November 16, 2012 at 8:52 pm

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

    Reply
    • Abu Shaleh says

      November 18, 2012 at 9:13 am

      I will try to make a wordpress plugin. :)

      Reply
  13. Mr Ple says

    November 16, 2012 at 8:00 pm

    Hi, are you using Marketers Delight skin?

    Reply
    • Ammar Ali says

      November 17, 2012 at 3:02 pm

      yup, I’m using this! :D

      Reply
  14. Raplus says

    November 16, 2012 at 4:58 pm

    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.

    Reply
    • Abu Shaleh says

      November 17, 2012 at 10:51 am

      Yes wordpress is the best CMS. But, Blogger/blogspot is not too bad :)

      Reply
  15. sahil says

    November 16, 2012 at 4:29 pm

    its awesome , i will try and use it in my blog, it s great

    Reply
    • Abu Shaleh says

      November 17, 2012 at 10:49 am

      Thanks Bro :)

      Reply
  16. jawad zaib says

    November 16, 2012 at 4:28 pm

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

    Reply
    • Abu Shaleh says

      November 17, 2012 at 10:48 am

      Yes, you can use it in wordpress or any other CMS on problem :)

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Let me take care of your website and make it run like a champ. I can help you with blog setup, migration, quick fixes or maintenance services.

Work With Me
New to my blog? Start here. blogging tools I use Free WordPress Blog Setup
  • 12 Things to Do Before Applying for Google AdSense in 2019 494
  • 8 Reasons Why I Hate Google Adsense 262
  • Top 15 Killer Tips To Increase Page Rank! 225
  • How To Get Traffic To A New Blog – 5 Great Ways 193
  • How to Earn $50-$100 Daily with Affiliate Marketing? 170
  • How to Get Index Your New Blog Post Super Fast 143
  • How To Upgrade AdSense Hosted to Non-hosted Account 113
  • 10 Top Reasons You Will Keep Failing as A Blogger 112
  • Why and How To Protect Adsense Account From Invalid Clicks? 110
  • 5 Best Author Box Plugin for WordPress 101
  • Top 5 Best Cheap WordPress Hosting – Fast, Secure & Trusted 97
  • Do You Know The Real Truth About Blogging? 52
  • How to Choose the Best Web Hosting? 44
  • 6 CSS3 Buttons With Hover Effects No Comments;
  • How to Earn $50-$100 Daily with Affiliate Marketing? 170
  • There’s (Nearly) Always Another Link Opportunity 8
  • Top .htaccess Tips to Secure Your WordPress Site 7
  • How To Quickly Sell Ad Spaces? 63
  • How To Delete A Blogger Blog Permanently In 5 Minutes (+ FAQs) 5
  • Top 5 Ways to Make Money Without AdSense 72
  • How Do You Benefit From Guest Bloggers? 13
  • Understanding Affiliate Marketing Opportunities for Bloggers No Comments;

Footer

What others are reading..

  • 6 Tips to Write Guest Post that Will Get Accepted Immediately
  • Top 5 Best Related Posts Plugins For WordPress Blogs
  • Why Your Website Get Penalized by Google Penguin Update?
  • Are You Using TOO Much WordPress Plugins on Your Blog? Stop Right Now!
  • 10 Killer Ways to Boost Your RSS Subscription Number
  • Explore the blog

    • New Here? Start Here
    • A Ridiculously Helpful Guide to Start Your Own Blog In 10 Minutes
    • How To Grow Your Blog And Build An Audience
    • How To Make Money From Your Blog
    • Cheap WordPress Hosting
    • Free WordPress Hosting

    Quick links

    • Free WordPress Setup
    • Tools I Use
    • About
    • Advertise Here
    • Contact
    • Disclosure Policy
    • Privacy Policy

    © 2019 · All Blogging Tips · This site runs on A2Hosting