Membuat Menu Share Dock

Gambar Di atas merupakan Contoh Gambar Menu Share Dock,
Mungkin Anda Pernah Melihat Menu Ini Sebelumnya atau memang belum pernah,
Sedikit penjelasan, menu ini jika di arah kan oleh mouse maka icon tersebut akan mengalami perubahan bentuk,
Menu ini sangat unik selain ideal untuk blog juga membuat tampilan blog kita lebih terkesan elegan
Apakah Anda Tertarik untuk membuatnya,...!!!
Untu Melihat contohnya Klik Aja di Sini 
Ok.. gak usah panjang lebar lagi langsung aja ke prosesnya di bawah ini :
1.Copy Paste Script Kode Dibawah Ini Dulu

<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>

2. Masuk ke blogger Anda

3. masuk ke dashboard Klik tata letak

4. klik Tambah Gadget dan pilih HTML / JavaScript

5. Copy Paste Kode Tadi Di HTML/Javascript

6. klik Simpan,

Artikel Terkait:

Posted in: Tutorial Blog