Home » Technology and Apps » Enhance your Blogging Experience with CSS3 Social Sharing Widget

Enhance your Blogging Experience with CSS3 Social Sharing Widget

Social media sharing has emerged as one of the easy mediums to share and spread the information with other people in your networks. As people are getting more social these days, the website owners are using more social media sharing buttons to spread the word and grab more and more traffic on their website. Thus Bloggers can now enhance their social sharing experience with the attention grabbing social media button (circle) that expands to a bunch of social sharing widget on hover.

Widget

This widget has been created using pure CSS3, having 4 social media buttons: Facebook Like button, Google +1 button, Tweet button and MainShareThis button to give it more captivating look.
Note: The animated zoom out feature in this Social Sharing widget works only on latest browsers and not Internet Explorer (not tested on IE10).

Live Demo

How to add this widget to your blog

  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 add the given below code after it.

5.Save your template and you are done!

Customization

The demo and the post codes are same, you can made adjustments according to your blog design. No more customization is required for this CSS3 social sharing widget for blogging. But still if you want to replace your existing share this script with this ShareThis script, you can.

Once all changes are made, save everything and check the widget.

Hope you liked the tutorial, and if so, do ShareThis in your network too. 🙂

If you were seeking assistance related to HTML/CSS development, hire HTML developers here. We are always up for help. Give us a line!

Are you ready to turn your idea into reality? Contact Us Now

More From ValueCoders Blogs:-

AngularJS-vs-ReactJS detailed

AngularJS vs ReactJS : What’s good for your business?

AngularJS is managed by Google and ReactJS is owned by Facebook. Both of them are unique and resourceful in their own ways. These frameworks are quite easy to use with […] - Read More

Google Pixel

iPhone 7 Plus Headphone Jack- That’s Google Pixel

The timing really couldn’t have been better for Google Pixel. It was just a few weeks ago that Apple unveiled the controversial iPhone 7, alienating some users by […] - Read More

big data for business

What is Big Data? What is its Importance For Businesses?

Big data is definitely useful for businesses which have a large customer or employee base. Small businesses too, can use big data for expansion and growth of the […] - Read More

firebase vs meteor

Firebase Vs Meteor

Every business is keen to build mobile apps these days, both natively and for the web.  This  ranges from something like a to-do list app, whose value-proposition is […] - Read More

Featured Post

native-vs-hybrid-cover

Native App vs Hybrid App Development: What To Pick?

Before we dive into the discussion of Native app vs Hybrid app, let’s take a look at the current mobile market scenario. According to a latest survey, about 88% of smartphone users prefer Android OS and 11% prefer iOS. However, if you go by your market segment, it can happen that your customers are more[...] - Read More