Sunday, August 8, 2010

Tutorial ; Dock Sharing Widget

klik gambar utk zoom in :)

pe dia ' Dock Sharing Widget ' ? dock yg de button share to social networks macam facebook , twitter , myspace , stumbleupon , reddit , delicious & macam -  macam lagi . widget ni akan stay ada bile korang scroll down or up . utk tutorialnya , sile scroll ke bawah . hehe .





STEP 1 : Design > Page Elements > Add A Gadget > HTML / Javascript

STEP 2 : Copy kod di bawah & paste kat HTML page .
<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/AVvXsEhBlC4iCXDjYBvHm3OeuHwObkAHu1Wtr-uvQeR2OWhl_me1D5Omo6_Gt14RtHSrZ4cWnY0t7zpbwJkdkMp0Bj3P6ZFQDg1tvbWptMyRGZ3dO6ypNQsW25G83mf6uTx5NXHjOpil557xjtI/) 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>
STEP 3 : Save & siap ! :)

p . s ; senang je kann ! ;)


Kasi komen sikit k?

4 comments:

Qib said... [Reply]

x paham ler.. hee.. susah nk tengok blackquote pecah.. macam mana eh?

Latest entry. Mai la jengok
Tolong (patploh juta kali)

Unknown said... [Reply]

@PinQib blockquote pecah ? means ? copy je straight kod tu :)

Qiqi said... [Reply]

waa ! tq tq tq .. jd laa ? i loike it.. thnx yerk =)

Unknown said... [Reply]

@Qiqihehe. bagus bagus ;)

 
back to top Blacy Smiley - Haha Bucktooth