Cara Memasang Menu navigasi CSS Mac Dock with jQuery

Ok sob kali ini aku akan sedikit berbagi tentang cara memasang navigasi CSS jQuery ok cara nya sangat lah mudah dan simple aja contoh nya bisa anda lihat d blog saya ini.ok langsung ke TKP aja sob silakan ikuti langkag-langkah berikut ini :

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi CSS Mac  Dock with jQuery
---------------------------------- */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(http://red3vil.xtgem.com/dock-bg2.gif);
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}

dan simpan script berikut diatas kode </head> :

<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://kangdadang.googlecode.com/files/interface.js"></script>

Selanjutnya simpan script berikut diatas kode </body> :

<script type="text/javascript">
  
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>

Dan cara pemanggilan nya melalui HTML 

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="http://dimashredevil.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCOfa02kbdSMjXSGuGW_IvJ_vhTXwFf3_AkWVujfmcHLBtz0ngOz73F4ynL5gXYfEepB0r7cmZSg35LCVCUnOpIE_6-vIitGg2qukMTd_cIrNTfOsyCB0OOq1LdkQkCyJH3fmnxhj_CQ/s1600/home.png" alt="Home" /><span>Home</span></a>
  <a class="dock-item" href="http://www.blogger.com/profile/15357131409388946339"><img src="http://dimash.mw.lt/lg profil.png" alt="Profile" /><span>Profile</span></a>
  <a class="dock-item" href="    facebook.com/reddevil.detected"><img src="http://dimash.mw.lt/lg fb.png" alt="Facebook" /><span>Facebook</span></a>
  <a class="dock-item" href="http://twitter.com/dim4sh"><img src="http://dimash.mw.lt/lg tw.png" alt="Twitter" /><span>Twitter</span></a>
  <a class="dock-item" href="http://koprol.com/users/dim4sh"><img src="http://dimash.mw.lt/lg yho.png" alt="Koprol" /><span>Koprol</span></a>
  <a class="dock-item" href="http://dimash_devil@yahoo.com"><img src="http://dimash.mw.lt/lg email.png" alt="Email" /><span>Email</span></a>
  <a class="dock-item" href="http://youtube.com"><img src="http://dimash.mw.lt/lg youtube.png" alt="Youtube" /><span>Youtube</span></a>
  <a class="dock-item" href="http://dim4sh.wapdale.com"><img src="http://dimash.mw.lt/wap.jpg" alt="Wap" /><span>Wap</span></a>
  <a class="dock-item" href="http://red3vil-666.blogspot.com"><img src="http://dimash.mw.lt/lg blog.jpg" alt="Blogspot" /><span>Blogspot</span></a>
</div>
</div>

untuk melihat hasil nya clic DISINI


CATATAN : untuk yang berwarna hijau rubah dengan url anda
                     dan yang berwarna merah url gambar anda

Save dan lihat hasil nya...........selamat mencoba sob

Cara Memasang Menu navigasi CSS Mac Dock with jQuery 9out of 10 based on 10 ratings. 9 user reviews.