Cara Membuat Menu Docking Jquery

Menu Docking adalah menu 3 dimensi yang menggunakan fasilitas jquery. menu docking ini tambah menarik karena dilengkapi icon sesuai dengan menu tersebut. contohnya Home maka icon yang cocok gambar rumah. Menu Docking juga ada softwarenya untuk bisa digunakan di komputer sobat. Jika sobat ingin Membuat Menu Docking dengan jquery ini ke blogspot sobat, sebelumnya anda bisa lihat dulu demonya disini

• Kemudian Login ke blog anda
• Pilih tata letak
• Elemen halaman
• Tambah gadget "JavaScript"
• Masukan jquery dibawah beserta stylenya:

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/jquery1.js"></script><script type="text/javascript" src="http://dinhquanghuy.110mb.com/interface.js"></script><script type="text/javascript">$(document).ready(function(){$('#dock').Fisheye({maxWidth: 50,items: 'a',itemsText: 'span',container: '.dock-container',itemWidth: 90,proximity: 90,halign : 'center'})});</script><style type="text/css">.dock {position: relative;height: 50px;padding-left:0px;margin-top:0px;}.dock-container {position: absolute;height: 50px;padding-left: 20px;}a.dock-item {display: block;width: 60px;color: #000;position: absolute;top: 0px;

text-align: center;

text-decoration: none;

font: 14px Arial, Helvetica, sans-serif;

}

.dock-item img {

border: none;

margin: 5px 10px 0px;

width: 100%;

}

.dock-item span {

display: block;

padding-left: 20px;

}

</style>

<div style="display: block;" class="dock" id="dock">

<div style="left: -7.48972px; width: 814.979px;" class="dock-container">

<a style="width: 90px; left: 0px;" class="dock-item" href="link 1"><img src="http://i342.photobucket.com/albums/o433/bkprobk/home.png" alt="home"><span style="display:block;">Home page</span></a>

<a style="width: 90px; left: 90px;" class="dock-item" href="link 2"><img src="http://i342.photobucket.com/albums/o433/bkprobk/about.png" alt="Gi�i thi�u"><span style="display:block;">Introduce</span></a>

<a style="width: 90px; left: 180px;" class="dock-item" href="link 3"><img src="http://i342.photobucket.com/albums/o433/bkprobk/dichvu.png" alt="D�ch vụ"><span>Service</span></a>

<a style="width: 90px; left: 270px;" class="dock-item" href="link 4"><img

src="http://i342.photobucket.com/albums/o433/bkprobk/sanpham.png" alt="Site ���£ thiết kế">Customer</a>

<a style="width: 90px; left: 360px;" class="dock-item" href="link 5"><img

src="http://i342.photobucket.com/albums/o433/bkprobk/template.png" alt="Template"><span style="display: block;">Template</span></a>

<a style="width: 90px; left: 450px;" class="dock-item" href="link 6"><img

src="http://i342.photobucket.com/albums/o433/bkprobk/history.png" alt="history"><span style="display:block;">Advisor</span></a>

<a style="width: 134.979px; left: 540px;" class="dock-item" href="link 7"><img

src="http://i342.photobucket.com/albums/o433/bkprobk/doitac.png" alt="calendar"><span style="display:block;">Partners</span></a>

<a style="width: 140px; left: 674.979px;" class="dock-item" href="link 8"><img

src="http://i342.photobucket.com/albums/o433/bkprobk/email.png" alt="rss"><span style="display:block;">Contact</span></a>

</div>

</div>

• selanjutnya tinggal disimpan