OS තාක්ෂණයේ අලුත්ම Share Wiget එකක්.. ~ සෑම්ගේ අඩවිය / Technology සිංහලෙන්

මම ඔයාලට දෙන්න යන්නේ තවත් අලුත්ම රහසක් අපේ බ්ලොග් එකට දාගන්න..මෙක හරිම ලෙසියෙන්ම අපේ බ්ලොග් එකට ද ගන්න පුලුවන්..ඒ වගේම මේ ගැජට් එක නිපදවලා තියෙන්නේ Apple OS X Styled Dock කියන මෘදුකාංගය උපකාරි කරගෙන..Apple OS X Styled Dock මෘදුකාංගය අපේ පරිගනකයට දා ගන්න විදිය ශාන් සහෝදරයාගේන් දැනගන්න මෙන්න මෙතනින් යන්න..
හොදයි දැන් මම කියලා දෙන්නම් Apple OS X Styled Dock මෘදුකාංගය උපකාරි කරගෙන සෑදු Share Wiget එක අපේ බ්ලොගයට දා ගන්න විදිය..මේ Wiget එක ක්‍රම දෙකකට අපේ බ්ලොගයට දා ගන්න පුලුවන්.එහේනම් මම පලවෙනි එකෙන්ම පටන් ගන්නම්..
Demo

පලමු ක්‍රමය: dashboard >> layout >> යන්න ..දැන් pages ගිහින් Add a gadget HTML/JavaScript තොර ගන්න..ඉට පස්සේ මම පහල දිලා තියෙන කොර්ඩ් එක කොපි කරගෙන HTML/JavaScript Wiget එකට past කරන්න.

දැන් HTML/JavaScript එක Save කරලා වැඩේ කොහොමද කියලා බලන්න.

හොදයි මම දෙවනි ක්‍රමය කියලා දෙන්නම් මේක මගේ නිර්මාණයක් අලුත්ම විදියකට මේකෙන් File Share කරන්න පුලුවන්.මේ ක්‍රමයෙන් වෙන්නේ අපි අපේ ලිපියක් Open කරොත් විතරයි මේ ගැජට් එක වැඩ කරන්නේ.එකෙන් වෙන්නේ අපේ ලිපිය මේ ගැජට් එක Auto අරගන්නවා..ඉට පස්සේ අපිට අපේ File එක Share කරන්න පුලුවන්..

මේ ක්‍රමයට කට්ටිය කැමතිනම් පහල තියෙන ක්‍රමයට ඔයාලගේ බ්ලොග් එකට දා ගන්න.

dashboard >> layout >>Edit HTML යන්න..මතක ඇතුව Expand Widget Templates තැනට හරියක් දෙන්න..දැන් පහල තියෙන කොර්ඩ් එක හොයාගන්න..

<data:post.body/>

කොර්ඩ් හොයගෙන පහල තියෙන කොර්ඩ් එක <data:post.body/> කොර්ඩ් එක ලගට Past කරන්න.

<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/AVvXsEgpJbfZOEvCBLCjQYpJpdyJUk16EGuBWiilg_lq_jlzSktMfFkcBrOFHKJZeP0LAuS9uRd-ItVlE8JbbcfSYdD9QgtMbB1eEEzvkFWWEQvjwoiiQo1KN6aI9wsQXd8ZIrZaW8sQkphrzjw_/) 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>

දැන් Tmplate එක Save කරන්න.. Save Template

දැන් ඔයලා බලන්න මගේ ක්‍රමය හොදයිද අනිත් ක්‍රමය හොදයිද කියලා..

ගැටළු තියෙනවානම් අහන්න..මම උදවු කරන්නම්..මතක් කරලා ප්‍රතිචාරයක් දිලා යන්න...ඔබට ජය..