How to create a social share button like woorank

There’s all this ballyhoo straight away regarding Social Media marketing.

And, why not?

Social Media will send you a large amount of traffic.  The impact of social media is big certainly industries, make the most of this digital version of word-of-mouth marketing.

Make sure you've got opened ‪social media profiles on Facebook, Twitter, LinkedIn, Google+ etc. sites that are of interest to your customers.

Like woorank, add a classical social trigger to your site or blog.

1.     Go to your Dashboard on Blogger

2.     Click on >> Template

3.     Click on >> Edit HTML

4.     Search for <style>

5.     Copy and paste below css code inside <style> tag and save template.

#social-sharing-box{ display:none } @media all and (min-width:1245px){ #social-sharing-box{ position:fixed; display:block; right:20px; bottom:30px; overflow:hidden } #social-sharing-box a{ display:block; float:right; position:relative; text-decoration:none; text-indent:-9999em; padding:0; margin:0; background:url(http://www.woorank.com/assets/img/css/sharing-sprite.png) no-repeat -76px 0; width:81px; height:85px; vertical-align:top; z-index:110 } #social-sharing-box a.twitter,#social-sharing-box a.linkedin,#social-sharing-box a.googleplus{ background-position:-38px -49px; transition:margin 300ms; -webkit-transition:margin 300ms; width:37px; height:36px; margin:43px -49px 0 4px; z-index:105 } #social-sharing-box a.googleplus{ background-position:0 -49px } #social-sharing-box a.linkedin{ background-position:-38px -6px; margin-left:0 } #social-sharing-box:hover a.twitter,#social-sharing-box:hover a.linkedin,#social-sharing-box:hover a.googleplus{ width:37px; margin:43px 0 0 4px } }

1.     Now go to Layout tab

2.     Click on >> Add a Gadget

3.     Add >> HTML/JavaScript

4.     Copy and paste below code and save gadget.

Change username according your social username.

<div class="like" id="social-sharing-box">
<a class="facebook" href="http://www.facebook.com/username" rel="nofollow" target="_blank">facebook</a>
<a class="twitter" href="https://twitter.com/intent/user?screen_name=username" rel="nofollow" target="_blank">twitter</a>
<a class="googleplus" href="https://plus.google.com/+username" rel="publisher" target="_blank">googleplus</a>
<a class="linkedin" href="http://www.linkedin.com/user%20id%20or%20name" rel="nofollow" target="_blank">linkedin</a>  </div>

Demo