Cara Memasang Menu navigasi CSS Mac Dock with jQuery

Sedikit Info Seputar Cara Memasang Menu navigasi CSS Mac Dock with jQuery Terbaru 2017 - Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Cara Memasang Menu navigasi CSS Mac Dock with jQuery, kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang Artikel tips blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Memasang Menu navigasi CSS Mac Dock with jQuery Terbaru
link: Cara Memasang Menu navigasi CSS Mac Dock with jQuery

Berbagi Cara Memasang Menu navigasi CSS Mac Dock with jQuery Terbaru dan Terlengkap 2017

Ok sob kali ini aku akan sedikit berbagi tentang cara memasang navigasi CSS jQuery .ok cara nya sangat lah mudah dan simple aja kok.click DISINI untuk melihat tampilan 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/AVvXsEgB6UDdMo_wsl9iU3coRmE-W2LZ5PtUUKD3ODHf4gXwXXuIaBhuysjso3f60ZwhoX66ncLdP07wzM1a1DVkmwSnmtUD81WOHu-Qnkh9yRMl3woyE8flqa9jdeVvHX8pdpMkMSRe02xFL5w/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>




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

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

Itulah sedikit Artikel Cara Memasang Menu navigasi CSS Mac Dock with jQuery terbaru dari kami

Semoga artikel Cara Memasang Menu navigasi CSS Mac Dock with jQuery yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Apps For Free. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Cara Memasang Menu navigasi CSS Mac Dock with jQuery