OS තාක්ෂණයේ අලුත්ම Share Wiget එකක්..

මම ඔයාලට දෙන්න යන්නේ තවත් අලුත්ම රහසක් අපේ බ්ලොග් එකට දාගන්න..මෙක හරිම ලෙසියෙන්ම අපේ බ්ලොග් එකට ද ගන්න පුලුවන්..ඒ වගේම මේ ගැජට් එක නිපදවලා තියෙන්නේ  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 කරන්න.

<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/AVvXsEgxTL_QFfwrzdLqDOtzeV_GF2iVN7yGfcr3_RrthHwc1WAboqXmrmbZV2PXkxZA2PC_4mj0ENozho0kUqKewcfNAslqsPPe_n3MzRVZPI34stYuG5JGBYpGj8h7JFINfFmlVG_uBMAto4Pm/) 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>

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

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

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

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

<data:post.body/>

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

<!-- AddToAny Share/Save BEGIN saamgeadaviya.blogspot.com-->

<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/AVvXsEgxTL_QFfwrzdLqDOtzeV_GF2iVN7yGfcr3_RrthHwc1WAboqXmrmbZV2PXkxZA2PC_4mj0ENozho0kUqKewcfNAslqsPPe_n3MzRVZPI34stYuG5JGBYpGj8h7JFINfFmlVG_uBMAto4Pm/) 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>

<!-- AddToAny Share/Save END saamgeadaviya.blogspot.com -->

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

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

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