Author: | christophery |
---|---|
Views Total: | 17,722 views |
Official Page: | Go to website |
Last Update: | May 27, 2014 |
License: | MIT |
Preview:

Description:
Fully responsive sliding social media buttons built on top of CSS3 transition & transform properties to promote your webpage, post or product. Font Awesome is required for the social media icons.
How to use it:
Include the necessary Font Awesome framework in the document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
Include the required slide-social-buttons.css in the head section of the page.
<link rel="stylesheet" href="css/slide-social-buttons.css">
Facebook Like Button:
<section class="social-buttons"> <!-- Facebook --> <div class="slide-social"> <div class="button"> <iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe> </div> <div class="facebook icon"> <i class="fa fa-facebook"></i> </div> <div class="facebook slide"> <p>like</p> </div> </div> </div>
Twitter Tweet Button:
<section class="social-buttons"> <!-- Twitter --> <div class="slide-social"> <div class="button"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://google.com" data-text="Google.com" data-via="cssscript">tweet</a> </div> <div class="twitter icon"> <i class="fa fa-twitter"></i> </div> <div class="twitter slide"> <p>tweet</p> </div> </div> </div> <!-- Twitter JS --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Google +1 Button:
<section class="social-buttons"> <!-- Google+ --> <div class="slide-social"> <div class="button"> <div class="g-plusone" data-size="medium"></div> </div> <div class="google-plus icon"> <i class="fa fa-google-plus"></i> </div> <div class="google-plus slide"> <p>+1</p> </div> </div> </section> <!-- Google+ JS --> <script> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
Linkedin Button:
<section class="social-buttons"> <!-- Linkedin --> <div class="slide-social"> <div class="button"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script> <script type="IN/Share" data-url="http://google.com/" data-counter="right"></script> </div> <div class="linkedin icon"> <i class="fa fa-linkedin"></i> </div> <div class="linkedin slide"> <p>share</p> </div> </div> </section>
Pinterest Button:
<section class="social-buttons"> <div class="slide-social"> <div class="button"> <a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </div> <div class="pinterest icon"> <i class="fa fa-pinterest"></i> </div> <div class="pinterest slide"> <p>pin it</p> </div> </div> </section> <!-- Pinterest JS --> <script src="https://assets.pinterest.com/js/pinit.js"></script>
Nice work, thanks! 🙂
Thank you so much, I really love it
Those any of these works for blogger templates? http://www.9jainfospace.com/