Menu navigasi CSS Mac Dock Bottom With JQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi CSS Mac  Dock bottom with jQuery
---------------------------------- */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: relative;
    left: 0px;
}
.dock-container2 {
    position: relative;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD51VR-xGDVnytGiuqOa1CZmNlght-YzDAb_BBg13ti1ZPlQ25BCP_gIUE7OS76k4a6BOFObP0Y59FbUXKk0jy_lCVYzGEt2_UImpPvTrHCImX7vcthu9y3lKVX2GBs4hJyNFlExrpOaU/s1600/dock-bg.gif);
    padding-left: 20px;
}
a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}

8. Selanjutnya simpan kode 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>

9. Simpan script berikut ditas kode </body> :

<script type="text/javascript">
  
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>

10. Save
11. Terakhir penempatan pada html, simpan sesuai keinginan baik itu pada edit html posting ataupun html/java script pada menu gadget :

<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EjXxD_EHbzl_AwAL_LSKyVMYqbFyvWzc8zRFyFdqjeiAQlW0dJfa0j3tDLR9zfcObO7neX0lTxbOJ4VVYsW5XZF9BWe8B1QDgAFVVPKpYg-kkzdF0rWP59BzAAHrO5b1JDr1MuYxzKI/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW73RdREt4UcwaFetBoVKM-FIqHa7r6dxpKm8-ChJcqBeupZ72LIVEKW1W9wKTwCwZzPYIpJsrFUmo0aTPGtj5yY_kJbT7_BP0wqNftjw2GmiTqW91dTdb6lAv4eY4Zrm71QejnwppoJs/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZrJqwHJUwi30Nm9vZURJNGptLCIiP4UfjiDR3oHxqSP8LqxRpg49LfwZy3Hqj6d86HPnCi2zUWFCu0r-hymiV29FOgQpqLCEa7wLIbHkbaEiPuECDz_doXSTkjqQiMEbcV6XUMZ5drA/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5wmTRedLm-T5H6Y4r_8ah4y4Qc2hx80z34kuftVC-Uz_sIEWD4IMB14ijuYzWfm70qoFhOy82bnKqD4dt6Qs8Ya6rsEeRRDOWzpDj2FAA2q0w8ji7rHIv0C-bEL7Cg5yNODOO_qpSx0/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipmkQyW80_JhDvrIY-H61bsuYjzz8pgZ5QipPyHtcfquGsdq2Y4DYRiE-YqF7qMWT6eOaqeniRIUbJtgpNU6t7NhNsiA7xl98gK2j8MEZtthaGzXSQ1s6tbydDfj5ky3EjSxkgF8VRCQ/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1XJQjcIN5mHr8cx0HJIRX5ZJUmG7EdusiT4gU7sdiBw3dVydwp-Sp6Ps_GsXIOAag6i4312THXXb0h3HkyIp5GtFKsbC71-0io5uq5bAh-p2jHx1TRaj67KceShG95HrStLBW4Ep-OE/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cFrWR1ugHhrgmaeza91-oOJj9RCSn9-IWWyKlK5zrd7SbsCJwG4Mn-lZ1R9zz7XtVrs_Fb4CcqGeJm8wuqCU73ZKBVZClHMYH4FYV23rHzjsYJjlk_IvPcNwESnrZ0Qtp9mPIwkSF-w/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja68uZfDlj3dIUZs5yoXFgKQQUfTivto-H898RL7Ako36GU5vRWeeCp8qgOgdL63UmZFBmung-Yx-WyjAroZQU7DUnrZ2b3VaH2QT_kj3iZ1UoBK7O3WpS9jLl1CRbm3Lydb5n3sdjHfI/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQOyXRiiVUzJJE9e_0guzWGd1aSovrVCd_1iDIjxnuh1WRnhJjqXKBP3AWetqloA_WLEMJXYFNb4rNFnVccCT1hIAmEvlgX8JibzjlEbZktmhqq01fNIf-4aQmu1ki7H0wJCI6H8NVSM/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>

Related Post