..:: 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://lh5.googleusercontent.com/-Tzvk7gEQayM/TYk7hMbzrBI/AAAAAAAAAaY/AKv8REtJ2Bo/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:

Comments
0 Comments

{ 0 komentar... Skip ke Kotak Komentar }

Tambahkan Komentar Anda

 
© Copyright 2012. Blogger | Edit Template by Japarus | Last Edited : 988BET Agen Bola Untuk Prediksi Piala Eropa 2012

Link Sahabat Berita Terbaru Hari Ini | Aneka Baca |cyber |FBA |Boim Casano |coyac blogspot |Info ZUS

Dr.5z5 Open Feed Directory | Free Backlink Exchange For Seo | Free Auto Backlink Exchange Service | free search engine submission |My Ping in TotalPing.com | | Ping your blog, website, or RSS feed for Free | | |Free SEO Backlinks |