Add Animated Social Sharing Widget To Blogger

As you know that after a rapid , a very large development and growth Social Sites . Almost all the people who run a website they are showing much interest in making their site social for more and more visitors with their favorite social sites i-e Facebook , Twitter , Google + etc .That's why people are making and   developing social widgets and plugins using CSS, CSS 3,HTML 5 or any other .This one is the latest edition of June 2013. When a visitors hover his cursor over an icon an rectangular box  will appear with it's icon's name and border.

Features Of Animated Social Sharing Widget

1. This widget is developed by pure use of CSS 3
2. The icons used in this widget are not simple they are highly pro build with pure CSS 3.
3. There are five social icons in this widget with an hover effect.
4. This widget adds more color, beauty to your blog

Let's Add It

Difficulty = 3  out of 5

The steps are some difficult and will take upto 7 minutes

1. Go to Blogger >> Template >> Edit HTML
2. Click On Code To Activate It
3. Find the code given below (tip: Press CTRL+F to find)
4. ]]></b:skin>
5. Now Add the Below code just above it

/*---cloudspedia.blogspot.com Animated Social Sharing Tooltips Widget ---*/.cpedia-wrapper{ padding: 0; width: 535px; height: 70px; margin: 80px auto 30px auto;}.cpedia-wrapper ul{ float: left;}.cpedia-wrapper ul a{ display: block; width: 68px; height: 70px; margin:  -10 -24 px; outline: none; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxqngLPdRzKp6cagtVBJpn-06xRuAmkjFWkfzzIs12vTbiwHEcpimtgIZQ6_gASftu9FvC4VyhvJ8GOVJB66j8oJHXzEYCJ6jnaplc-aGYPP14JUc4tXtJ4MO5e1BTPtgOC78aB07Hpzq/s1600/1.png) no-repeat top left; text-indent: -9000px; position: relative;}.cpedia-wrapper ul .cpedia-gplus{    background-position: 0px 0px;}.cpedia-wrapper ul .cpedia-twitter{    background-position: -68px 0px;}.cpedia-wrapper ul .cpedia-pinterest{    background-position: -136px 0px;}.cpedia-wrapper ul .cpedia-facebook{    background-position: -204px 0px;}.cpedia-wrapper ul .cpedia-linkedin{    background-position: -272px 0px;}.cpedia-wrapper ul .cpedia-rss{    background-position: -340px 0px;}.cpedia-wrapper ul a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: Shanti, Arial, Helvetica, sans-serif; font-weight: 400;  font-size: 14px; color: #2f6986; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #2f6986; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -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;}.cpedia-wrapper ul a span:before,.cpedia-wrapper ul a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1);}.cpedia-wrapper ul a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #2f6986;}.cpedia-wrapper ul a:hover span{ opacity: 0.9; bottom: 70px;}

And Save it !!!

Now, Go To

1. Go to Blogger >> Layout >> Add a Gadget
2. Select HTML/Java Script
3. Add the Code Below

<div class="cpedia-wrapper">   <ul><a class="cpedia-gplus " href="https://plus.google.com/u/0/100865451092814927289"><span>Google Plus</span></a></ul>       <ul><a class="cpedia-twitter" href="http://twitthis.com/twit?url=http:/www.cloudspedia.blogspot.com"><span>Twitter</span></a></ul>       <ul><a class="cpedia-pinterest" href="http://pinterest.com/your-URL/"><span>Pinterest</span></a></ul>       <ul><a class="cpedia-facebook" href="http://www.facebook.com/sharer.php?u=http://www.cloudspedia.blogspot.com"><span>Facebook</span></a></ul>       <ul><a class="cpedia-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>       <ul><a class="cpedia-rss" href="http://feeds.feedburner.com/Cloudspedia"><span>Feeds</span></a></ul>   </div>

Now , Change

·         Replace https://plus.google.com/u/0/100865451092814927289 with your Google Plus URL.

·         Replace Pinterest-URL with your Pinterest User name.

·         Replace Linkedin-URL with your Likdendin account URL.

·         Replace http://feeds.feedburner.com/Cloudspedia with your blog's Feed URL.