Cara Membuat Menu navigasi CSS Mac Dock bottom with jQuery

Langsung aja gan ga perlu basa basi agi .:D
bismillah dlu .

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/AVvXsEh4vkMuUbl6IkN_xAhV5QyT9qhlX8R6uJ6R0vZqCcqI8Vi8Tx7Au9kvN3vZ2LwD5xhdo7RDgCthaEJXP1oRf7hGmDE9OL1TWzGwishLZi_tQ4xk-JjxaKHzXW03itAno3H1TrB7-WBnmsw/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/AVvXsEirunFZ2SeZ2cDczucktyq7vYUfbCUddxAMTrT2Hq-GlTuiFoSxznbnodYhqijc_sEyUYXrZ9caA4RaipDxFksoX09ckW64FAiaucDXnwkpCdgyP9bR0jQ_zMRj7IFEmaoAI4Gr37-4qEM/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2E3Qc6Y9PMAS9bLdj-0G9wUTbt_XzpPo97h68-romcUO70BbfNdnz36F0PQtdSQzyqLuxlbNfF4uPbdwhm_hVlruuqW8crJzvNg3sOlEeHrSZpfBFQ7vRin8DTjKH4NLNee9-hj4PQOA/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BWFRScSLns5dc6GVf0B6GzkuysciUT7C6A1VYZgxMZxJO9ycoMIC83B86YeZppNaXhBNC8-H5stjFuF0j15zq5LO2EDc6POF3u6FfCI8dB4syBESJsTSqD3hu9g0kauzso86kMro4NI/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3ZvGqHq4cnN4dd-yhOH7QP_oQ9Czn5xA8_qE4uvPVfeBWi476oUhdRkKn3DQGYU6Y9hcapsUy-6eNKN3OxflDXlbD6nmPwCRw2fGX-RxDpdTq-mrNC7O7ec5PPsp1iTrx0NbVfnCebQ/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTeDUPoMTI09AZpqWsf6rhB_cN8k25hsjxyiXatigZJvnCRNZSRaD0o4l9dFa7quEGwylpyBzq7P9pfoFXdZ8_ty-Bp4twWBqOdgBf_OSYeR5mXfxAdcnmGpqxC9p_ZlS3ySEEPRyQiA/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3E6ZK4cPUAaxQCietesqIzR4rwKUXCj17zle9wcOoLnHgTVDMxejxwMwjIrSjkiKIaJti0aESrZ259wa0rMNO0F7rwC5qUg2p3kcEor7KEFWlwYD5ksogBuxoQNCbHNYm2DTbpHRm90/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdxAl1ZHYbZKbr6_o46lj8h3ihuKbHSgOUPna-c5GWH66Spca3cYLbJJA_ryWSXFMik019UEvXgclkl5BhciCd_HaWXBEQBRAypyH2K-ARGi-94fbgXpAi5C1TxQfBm_cBVeITVyX994/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY6ghaRrFUD78hgS0Y2_oKVcBH8-6qf5xkvA5ik7kikGAT_ztsv6djL9_mwbuiFCQB1-ApVm9EDD2PDcgKYkzpSO_iwfvMxaSf8nJXQ43MWNOrvMKvJrD7_f4KeLtq7iN-NaDbk0Fyikg/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFea__thqE0pl_pU5jYJAxymx7RxtQwt7Zf-dbo7BihtMWjoTEldK0yOJOTB6gkElr5SRbX0oq2rULvt5xAQUueHEorFyDq-FODqezn2WwNE6NoczdpFtLiaCSnmz_poLN3Qej5uAShP8/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>

7. selesaisemoga bermanfaat .

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.