February 10, 2011

The Magic is Inside this Post...

Tutorial used:

  1. Add Floating Share Buttons Like Mashable to Blogger

CSS used:

#sharebox {
float: left;
margin-left: -110px;
position: absolute;
background: #921;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

The HTML Part and the list of Button Codes:

<b:if cond='data:blog.pageType == "item"'>
 <div id='sharebox'>
  <!-- Twitter -->
  <div class='wdt'>
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="blogger_Raju">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  </div>
  <!-- Facebook -->
  <div class='wdt'>
  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
  </div>
  <!-- Google Plus One -->
  <div class='wdt'>
  <g:plusone size="tall" expr:href='data:post.canonicalUrl'></g:plusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  </div>
  <!-- StumbleUpon -->
  <div class='wdt'>
  <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.canonicalUrl'></script>
  </div>
  <!-- Digg -->
  <div class='wdt'>
  <a class='DiggThisButton DiggMedium'/>
  <script type="text/javascript">
  (function() {
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://widgets.digg.com/buttons.js';
  s1.parentNode.insertBefore(s, s1);
  })();
  </script>
  </div>
 </div>
</b:if>

Some dummy Text to lengthen the post:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor metus nisl. Ut consectetur dignissim odio, id molestie tellus rutrum et. Suspendisse dignissim malesuada arcu in elementum. Vivamus elementum nibh sit amet orci feugiat nec fringilla odio sagittis. Nulla lobortis diam a leo tincidunt congue condimentum risus venenatis. Fusce at massa sit amet tortor vulputate accumsan. Aenean a sem quis turpis rhoncus ultrices. Fusce ut sapien nec justo eleifend sollicitudin. Sed nec odio eu diam varius luctus at vel diam. Morbi faucibus est ut nibh ultrices id volutpat purus tempor. Cras eget iaculis orci. Aliquam venenatis purus id est iaculis eget elementum felis bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu rutrum ipsum. Proin condimentum mi sed sem placerat ultricies eu nec orci. Aliquam mollis sapien eget eros elementum aliquet et eu enim. Curabitur et sem diam. Pellentesque iaculis urna at ante fringilla cursus. Etiam vitae quam eget erat congue tempus a id ipsum. Curabitur suscipit sollicitudin libero, vel iaculis ante egestas sit amet. Duis auctor venenatis erat semper auctor. Nulla at eros dignissim elit condimentum imperdiet at semper justo. Curabitur et mauris velit. Integer pharetra rutrum quam sed pretium.

Donec eu lectus elit. Duis lacinia est nec orci semper porttitor. Donec ullamcorper luctus erat, sit amet rutrum nunc placerat id. Aliquam cursus sapien leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquam dapibus purus eget bibendum. Maecenas gravida sollicitudin erat, ac rutrum tellus molestie at. Pellentesque ut adipiscing arcu. Aenean luctus, elit eu interdum condimentum, metus dolor dictum lacus, nec faucibus tellus felis nec magna. Nulla at adipiscing magna. Aenean blandit lorem sit amet nunc lobortis nec placerat ante posuere. In eget sem lectus, non fringilla nunc. Vivamus ligula felis, viverra dapibus molestie in, egestas vitae lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan, odio dapibus vulputate semper, eros ligula ultricies tortor, et sollicitudin nunc risus id dui.
Labels: ,