OS X Styled Sharing Dock Widget එක බ්ලොග් එකට දාගන්න..

මේ දවස්ටිකේ විභහගෙත් කිට්ටු නිසා බ්ලොග් එක පැත්තේ එන්න ලැබෙන වෙලාව අඩුයි. ඒත් ඉතින් එහෙම කියලත් බෑනෙ කස්ටිය බලන් ඉන්නවනෙ ඒක නිසා ඹන්න මම අථත් ලිපියක් දැම්මා. මේක නම් මැක්සා වැඩක්. හැමෝම මේ ගැජට් කෑල්ල බ්ලොග් එකට දාගන්න.

මේක ඩොක් එකක් ආකාරයට ක්‍රියා කරන Sharing ගැජට් එකක්. මේක දාපුහාම අපේ බ්ලොග් එක නරඹන්ඩ එන අයට කැමති 300 social bookmarking site එකකට Share කරන්න පුථවන්. ඒ වගේම මේකෙ social bookmarking site 300 ක් විතර තියනවා. හරි දැන් අපි බලමු කොහොමද මේක බ්ලොග් එකට දාගන්නේ කියලා.


මුලින්ම Design යන්න.
Add gadget > HTML/Java Script එකක් ගන්න.
දැන් පහල කෝඩ් එක එතන පේස්ට් කරන්න.

<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() 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>

දැන් Save කරන්න.

මේ පෝස්ට් එකට කමෙන්ට් එකකුත් දාන්න. තමන්ගේ වැඩේ කරගෙන ස්තූතියි වත් නොකියා නම් යන්න එපා. එහෙනම් තව අථත් ලිපියකින් මුණගැහෙමු..