Monday, February 7, 2011

OS X sharing widget for blogger

This is amazing widget.try this

1. Log in to blogger account  Design  >> Page Element >>HTML/JavaScript

2. Paste following code.

<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFcv9e8rs_kcPGgkXgYtTCwGHgDWcR_b9abNiabUttQGCRq7WFFldiFx4g__GNzxBXUHjIEO-AKSllRUx0B7ozWkUwevC2V1zqAznIvTxlBjp09JZprqf8HCsq_eptY1bzog4qc_CuJrU/s1600/bloggertrix1.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>

<div id="sharedock">
  <div id="dock">
  <div class="dock-container">

<div class="addthis_toolbox"> 

 <div class="custom_images">

 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

3. click save. now you are done.

6 comments:

  1. Hi, I tried this on my daughters blog but it sticks to the bottom of the screen rather than appearing at the base of each post. Do I need to alter the code?
    http://www.bibasphotos.com

    ReplyDelete
  2. make it small and put to left.so try this code.
    thanks for visiting my site.


    1.find this code.
    no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }

    2. replace with below code.
    no-repeat bottom center; height: 50px; padding: 30px 0 30px 0; }

    if you want to delete gray background find this link and delete it.

    http://4.bp.blogspot.com/_5D9h2kK4ukg/TU7yZaNlZNI/AAAAAAAAAIg/pjS81Tfb144/s1600/bloggertrix1.gif

    4. find these tag and change values.its on bottom

    itemWidth: 35,
    halign : 'left'

    ReplyDelete
  3. nice trick. check it out. Mobiles http://cellphonedesigns.blogspot.com/

    ReplyDelete
  4. Hi, can you please check why buttons not popout when we scroll down page? Mobiles

    ReplyDelete
  5. thanks for the nice post.
    usen in my blog www.ethicalhackrz.blogspot.com
    or www.ethicalhackrz.tk

    ReplyDelete
  6. thanx alot very nice...
    http://geoazadaro.blogspot.com/

    ReplyDelete