Blogger İçin OS X Dock Menu Gibi Sosyal Yer İmleri

Paylaşım düğmeleri geri bağlantılar için önemli faktörlerdir. Blogger SEO için önemli bir etken oluşturur. Ayrıca Siteye bu sayede ziyaretci çekerek blogunuza hit katar. Bir çok yer imleri düğmelerini  gördük ama bu seferki biraz farklı; tıpkı OS X Dock Menu Gibi mouse imleciyle aktif olduğunda hareket etmesidir.
Orijinali  AddThis.com tarafından yayınlanan bu yeni  sosyal paylaşım yer imleri widgeti  güçlü, şık  ve kolayca bloggerde kullanılmak üzere özelleştirilmiştir.

Widget Özellikleri:

* Kurulumu kolay, yalnıca tek adımda,
* Dünyadaki tüm sosyal paylaşım hizmetleri sunmakta,
* 3000 tane sosyal yerimleri site sunmakta.
Burada nasıl göründüğüne dair önizlemesi vardır. Dileyen bakabilir.
Nasıl Eklenir?
Blogger'e Giriş > Tasarım(Yerleşim) > Gadget Ekle > HTML-JavaScript  Bölümlerinden;

<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(http://www.addthis.com/cms-content/images/gallery/dock-background-sm.png) 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>

kodlarını ekliyoruz ve kayediyoruz. Sonra Bu widgeti sayfamızın  uygun bir yerine taşıyoruz. Bu kadar, işlem bitti.
 * Herhangi bir sorunda yorum bölümünde belirtiniz.