tokan brother

Cara membuat widget share button melayang

Gan, ada gx yang template blognya cuma 2 column seperti punya saya?
Susah kan klo mau pasang widget, karena gx ada tempat, klo pasang terlalu banyak juga nanti akan mempengaruhi loadng blog semakin lama,, Ni gan, saya kasih tutorial membuat share butto yang melayang, Ini widgetnya bisa menghemat tempat, serta dijamin tidak mempengaruhi kecepatan loading blog, Yaudah ni gan bagi yang mau pasang:




  • Log in 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


    Itu gan caranya, gimana? bagus bukan 
    Thx for visit Semoga bermanfaat

    0 comments:

    Posting Komentar

    Silahkan beri komentar, komentar anda sangat berarti bagi kemajuan blog ini, tetapi diharapkan tidak berkomentar dengan kata2 kasar