Cara Pasang Widget Share Button Melayang

Banyak kawan-kawan blogger mengatakan bahwa share button itu penting sekali untuk mempromoisikan blog atau posting. Hal ini karena ketika apa yang kita posting dapat langsung nancap disosial site seperti twitter, facebook, tecnorati, dan lainnya. Sampai saat ini share is sexy yang mungkin paling keren, tapi ane lebih suka menggunakan addthis dengan alasan terbilang gampang dan gak repot harus Edit HTML. Hasilnya juga boleh anda jajal dan di jamin bersaing kok...

OK langsung aja yaa...kali ini ane akan kasih cara pasang widget share botton menggunakan add this. Sebenarnya tampilan ini sih biasa aja...cuma masih dalam kategori widget...tapi enter dulu, walau sederhana tentunya akan berbeda dengan tampilan biasanya. Ini dia keunggulannya heheheee :). Nih widgetg akan melayang di blog anda...dan tempatnya juga di samping, serta dijamin tidak berpengaruh pada loading page anda. Ente Tertarik....ikuti langkah berikut ini.

• Log ini ke blog anda
• Klik Rancangan
• Klik Tamdbah Gadget
• Pilih Edit HTML/ JavaScript
• Masukkan script di bawah ini ke dalamnya

<style type="text/css">

  #sharedock { position: fixed; bottomleft: 0; left: 0; width: 100%; height: 40px; z-index: 999; }

  #dock { position: vertical; bottomleft: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }

  </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: 20,

  items: 'a',

  itemsText: 'span',

  container: '.dock-container',

  itemWidth: 30,

  alignment : 'left',

  valign: 'bottom',

  halign : 'center'

  }

  );

  });

  </script>

• Simpan Template dan lihat hasilnya
• Kalau Tampilannya kurang enak coba anda gerakkan kursor anda di Widgetnya, nanti juga berubah sendiri
• Selamat Mencoba

Sumber : blogonol

Artikel Terkait