Cara Membuat Menu Docking Jquery

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,

•     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