-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Menu navigasi CSS Mac Dock bottom with jQuery






    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. 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/AVvXsEj8erik2VCTr_VyV6O55eleAzUylX9B298tNbaRXiF2npOiQfH6bsQmvNKdUqWbih2ZmbnRQ_HJsM3I21oYyBK9iNzgEk9EYe_NibLY6EdBX03-gAnRpebvWip2zcUlmmhXcVc2yGj1Hs0/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%;
}

4. 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>
jika sudah ada tak perlu ditambahkan
5. 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>
simpan template
6. terakhir pemanggilanya 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/AVvXsEiIsgTLbFURv221W7C_nIrZ-zFpPptgJMVES-CblvZT4-weTrt3NdZHG11KpVrgAzK4zZJPvoRG_YhnAl4xLXAZ7wiS4ll6sXdnb8lg7BldbRYLMBDtZNGQ_LGOtSY4IBdCWFrlJGiu04Q/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivE7hQszN2u3eDOyKWDgs6z3UrCLAMRLZG_4wc44rvQhxOr1JBoUnO6rR-WFe8V7HlP361XynA7VSsq-pZd5vellF06qJjydC03YTkhC1UK3IYLSm8FmBpWOM8AdTKdYg8Zq6JciJWui8/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiag3bSqbOmHlnbMB5Q7q_7jJxLtaXXJyfWJ8pFsFg8TDpyVN8P0uhI3-P0mqGShe_eBBba_49JbP6x2AJktY94PA4IvzYrHvIw5Ljp7cT4kWWi56eoqmOIIVox6PVYiCDKMm4hZv0UY/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUyatKqo_zfWV7Q3Wa4D4CrA3flaycUIrN7WckCcvp6fT7nPvaIxx5CKe9U8RH-bbPL_Z0WcL5qAZPQAuKCMLcJrwWDg9yLmRFEShyaPqyTwGoYGePh9-QON_oYUwoLPvmUbSHucd_eI/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHU6FYXBqgmuu4mZRdDSZ_9QFvyrPQGvRYZbKXnI1AtIWdkbZRT4ebt9vXw7mlWtiqeZjsSEBskwjwdy4puCUK0Gdzl7diGDu1NoagdeYQLWMb4GS3oPGsHlGYpkBq_G4MNpqYiB43Ew/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgA1GK2YsuCTqc5rMRdP4fAH01uLgmtCvQTQJYxVhUxAzZalxxyTL6ESkcLZ7af377rEkIEJptL3YYDXg5RsWTw9-3tscf4b9JLCFxIP6uDdaQLxA8LG6qtPiVsrO1j2BRGepQ6V-w5g/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuGu0oXtEMqo-GhW7E8x0B_RVdeaH3wcAj0scK-5Z_pLXTNpI_IxWZzTtGj-eX3RTDvp94HbKtopohEckB3jOSwPt-sbfBCYc7wcAefpwhLYZYZ_H5YJ_zHHqWpOQl4xMiQ4lcF9pjmc/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2a5n0bgUt9qbHthSXLKVQo4ScNusIy6zmLOn12NV3W_QRb8BVGjLa6dLwD-NkhyzCU64etnSK3wEhJVshk9UrPwCA3Ei8cHs9zp7i2MjQ0skkYUyxNFJExnRQFiCurHHwYCLSzFkeyQ/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQ4eex-1iqwYGFZLN0sSwvqkiaD2dFBESdYDXd7W22U6J0y_JRqso0JYaGKWrY8NtSbERqJWW4IZNuQaHzsiqNLUfow7HDBd2uf0j8_9nLd7bupSDHzn2Hls9Vxqx348VjH7DFn9Hkis/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>
7. selesai

Leave a Reply