Cara Praktis Pasang Widget Dock Share Button Pada Blog

Bung Hasta belum tidur lagi nih untuk memposting lagi artikel tentang blogging, kali ini Bung Hasta akan memposting cara praktis pasang widget dock share button. Sebelumnya, mungkin dari kalian belum pada tahu apa itu widget dock share button, oke, Bung Hasta akan menjelaskannya.

Widget dock share button sama saja seperti tombol share lainnya, cuma widget ini memiliki kemampuan untuk meng-share artikel kita ke hampir semua situs social network, tidak cuma di Twitter atau Facebook saja, tampilannya juga menarik ada efek zooming icon seperti dock kepunyaan OS X / MAC OS .

Cara ini benar benar sangat praktis (bagi yang sering nge-blog, hehehe . . . .), ikuti saja langkah langkah di bawah ini.

• Login ke Blogger dulu
• Pada halaman Dashbor, pilih Rancangan
• Kalau sudah sampai halaman Rancangan, pilih lagi Tambah Gadget
• Kemudian pilih HTML/Javascript
• Lalu copy kode di bawah ini dan pastekan ke HTML/javascript tadi
  
  
  <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/AVvXsEhCpIn8-T8CF9Ountwl3_rocrI2zhWV1K4UZHAeW1GAg2s6BlJoS5BN4zK-Smjep9SjEjFCm-ukf-CFTIId2pymk3gci8GsJ7IIaJStmmVxjLeWKVpMoItPwcDNnJjnmf2MQbufvFns3Q/) 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" href="">Facebook<img alt="Share to Facebook" src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" /></a>
  <a class="addthis_button_twitter" href="">Twitter<img alt="Share to Twitter" src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" /></a>
  <a class="addthis_button_myspace" href="">MySpace<img alt="Share to MySpace" src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" /></a>
  <a class="addthis_button_stumbleupon" href="">Stumble<img alt="Stumble It" src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" /></a>
  <a class="addthis_button_reddit" href="">Reddit<img alt="Share to Reddit" src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" /></a>
  <a class="addthis_button_delicious" href="">Delicious<img alt="Share to Delicious" src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" /></a>
  <a class="addthis_button_more" href="">More...<img alt="More..." src="http://addthis.com/cms-content/images/gallery/addthis_64.png" /></a>
  </div>
  </div>
  </div>
  </div>
  </div>
  
  <script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript">
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
  </script>
  <script src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js" type="text/javascript">
  </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>


• Kemudian klik Simpan

Kalau mau lihat contohnya klik disini
Gimana??? Benar benar praktis kan??? (hehehe . . .)

• 
• 
• 
• 
• 
• 
• 

Download Lagu Lagu BLACK DIT DOT

Baca Yang Ini Juga Yah