Positioned social buttons + Added Google+

sergeylukin · May 16, 2012 · 3960b0b · 3960b0b
1 parent 766313b
commit 3960b0b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/css/general.css b/css/general.css
@@ -57,10 +57,10 @@ input#empty:checked ~ .bar-wrapper .bar-inner { height: 0; bottom: -2.5em; }
 }
 
 /*------------------------------------*\
- *  Twitter
+ *  Social buttons (like Tweet, G+ etc.)
 \*------------------------------------*/
-.twitter-share-button {
+.social-buttons {
   position: absolute;
-  bottom: 1em;
+  bottom: 0;
   left: 1em;
 }
diff --git a/css/responsive.css b/css/responsive.css
@@ -12,7 +12,7 @@
     #github {
       display: none;
     }
-    .twitter-share-button {
+    .social-buttons {
       position: static;
     }
     .bar-wrapper {

diff --git a/index.html b/index.html
@@ -37,8 +37,15 @@ <h1>Pure CSS 3D Bar Graph</h1>
 
   <br />
 
-  <a href="https://twitter.com/share" class="twitter-share-button" data-via="sergey_lukin" data-hashtags="css">Tweet</a>
-  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  <div class="social-buttons">
+    <!-- Twitter button -->
+    <a href="https://twitter.com/share" class="twitter-share-button" data-via="sergey_lukin" data-hashtags="css">Tweet</a>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
+    <!-- Google Plus button -->
+    <div class="g-plusone" data-size="medium"></div>
+    <script type="text/javascript">(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>
+  </div>
 
   <!-- GitHub fork ribbon -->
   <a href="https://github.com/sergeylukin/css-3d-bar-graph" id="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>