Share Widget Dengan Gaya OS X Dock

ok sobat pusing mau posting apa.. jadi saya pilih yang ini aja.. iya ini adalah widget berbagi dengan gaya OS X Dock selain dengan gaya OS X Dock letaknya juga melayang di bawah lo.. gak pecaya..nanti dibawah saya kasi link demonya.. icon icon yang tersedia pada widget ini adalah.. facebooktwittermyspacestumbleupon , delicious dan banyak lagi.. gimana.. mau? hanya di 3.. wkwkwk ok dah langsung aja lihat demonya di bawah.. sengaja saya ambil dari blog demo punya orang..hehehe

                                          [DEMO]


ok sekarang cara pembuatan..

loggin blogger.com >> Rancangan

selanjutnya tambahkan gadget
HTML/Javascript
masukkan kode berikut
<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/AVvXsEinDUXLTb9Rtx6b-L4QtvZBZoN40lbaPuUhhHEoJ96MUoDdQSggyQYMejqPBhI5fDBjDJKEQVJPSOdNPc6ZPF1iN3aRT5bvGoibjbbEQr1Lq3MQq86a0QTHqLSpAOpUki0elsJk1pqFokeK/s1600/widget-bg-donorilmu.gif) 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>

lalu simpan
SEMOGA BERMANFAAT

sumber : donorilmu


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 03.18 and have 10 komentar

10 komentar:

  1. Pertamaxxx

    kapan2 ane pasang gan :D

    BalasHapus
  2. Wahh.., kenapa gak bisa jalan yaa gan cuman 1 ikon aja di kiri bukan ditengah pula..
    padahal dah 2 kali dicoba di blog berbeda 3 kali..
    kok sama aja!!! coba gan perbaiki scriptnya yaa gan??
    makasihh

    BalasHapus
  3. ngikut sama yang atas kak
    gak bisa atuh kak
    coba yaa kak, tolong diperbaiki dulu yaa??
    ntar kalau udah benar saya coba lagi... hehehe

    BalasHapus
  4. . . keren nich,, next time aq pake ach,, tapi ntar dulu, cz aq mo ganti template. he..86x . .

    BalasHapus
  5. iya... maju truss mbak
    ckckck

    BalasHapus
    Balasan
    1. . . eh ne yg kayak dblog demo mu ya?!? jd pengen nich. huhh . .

      Hapus