MEMBUAT MENU SHARE DOCK

Sedikit penjelasan, menu ini jika di arah kan oleh mouse maka icon tersebut akan mengalami perubahan bentuk,dari icon facebook,twiter,yahoo,dll.........

Menu ini sangat unik selain ideal untuk blog juga membuat tampilan blog kita lebih terkesan elegan
Apakah Anda Tertarik untuk membuatnya,...!!!

Jika anda tertarik melihatnya,langkah-langkahnya sbb:

 

2. Masuk ke blogger Anda

3. masuk ke dashboard Klik tata letak

4. klik Tambah Gadget dan pilih HTML / JavaScript

5. Copy Paste Kode di bawah ini,di HTML/Javascript

<style type="text/css">

#sharedock { position: relative; top: 0; left: 0; width: 100%; height: 80px; z-index: 999; }

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

.dock-container { position: relative; background:url() 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"><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/><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>

6. klik Simpan

7.sesudah tersimpan,masuk lagi di acount blog anda & lihat hasilnya

menu share dock anda sudah jadi,dijamin 100%.karena saya sudah mencobanya & berhasil.

jika gagal masuk lagi di acount blog saya dan ketik komentar anda.....

jangan lupa ya ketikan  tanggapan atau saran di blog saya ini..