..:: 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 kok.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/AVvXsEgxLPfsYqDgVddv9k6pfCDBp13lYSB3LC_NAQ6xihBp-xcInHOd61NMV8S_pyQFPrOBAqJ4vl1iyjhEc9AqGArmN9J5X2KRiTmDg9DXOyUACTXNfFB3AhFS-TpbszcRKXDof0ls3BEX8V4/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

Artikel Terkait: