Menu navigasi CSS Mac Dock bottom with jQuery

Demonya bisa dilihat disini

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/AVvXsEits3xFnOUKBvZw2w6pHb4x27fAd3tTmVes2fxDh8szvyys7LG-T9u_rChX5Xx5VpDhBmOigpC-Ds_yEHye5lurpMfZePHPpOR8_Pe6Y9pg3mVuCNt8sYwM_QF-RU8cIx3Eah3rYeRqk9Y/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/AVvXsEjNni9SDnlNQYByQ9KnGI9qpWMX2neYf3OePLmRMV-qNLhVK4CIUZszT369ZzE3lDYS8N-lB-6qoZgJL2mGKc8SPVyFivyT1kQqEDEjerot74i-po6OE5ThPJ2Fy-WNLgLhBmU-pobylbI/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhVuJ8nz12dlyo-J_g6_mm0vzmfLadwOSkCyASAAnzMFExVzH2n8acgKMDzy5S6kmo1HCe6jDzKnHtJ1nrzAJ0mogvjk_5iGmMGHPP5HXC4wo_tNf2hv1CLHJ9ZdHy3hxEMnoIl5T1sg/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8Z6hZmMSOPm-j56QNbmEBla0EcbycYMJ10d2nktIFbk-9pMBwBdNCu2VSjZ1BVJfe_30yhsGsYsCo9dJztc53d3EspwSrvNKniko4XEkqnieNEaMQ2GQ7CCYlJqeSNb0bhVE9e-CRpM/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH8CJ1U8GxxVgPPofquTTxU4IKIyFZ0wxZTEYMny3SPZY7HHid21Z2qweSRXg0GVXSOSi7er_ST-Q427TZ7wIwFc4Q2n_p4w2PZ4UQnmLT-xF58I7DzLGX5cAfax-JGAWc4AFznR1T9V0/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfzA23xsJqF3AG5bS8pQGUyevOuiVNY3il63Pp3ePQtYzSr1QQKwiJqWW-IcHXHlrHY8XpKHac7J9F8Yzw4csONt76BH7zokQBy-5yUWNV4Ji8zbGX7LHGC8GPXIz6xKCGpr6mgP7tFo/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWLdkvxr9KR7YD06LTKbgAoB3y75S-8CYjfPTlA6iyIAvyTBYJaZW0ihz7FqbFC0Q9yhOJHHY44ECAu52_TWamxwPP_35jjn9MWDnPFScU4F2VgI4XQDn4_X5PIn88mU_RsTzMn9VsWI/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhro6UQWkN7ikNG7hIsNVFYBJ3YPSysW5c2DKlnVZ1-WNXBwFmmxsIDmdt-wUy22bQp2-djP9aXUz0FHIJCqCmYz9mn0Wd7yX4HQAafHd2LvpWx0iKV40vzJnH5Tvjtw5pLvixmAWlQhqE/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0HuQb-2bU9YJEMD8-he2AFk0XxYYb-hnJIXeuwQYvTBQgSuKzHzpJBk49jNhqaPnJrq9qSGHaHprBvx-7mjGV0rfwoajB_NtL2V7fiwCjbzPuAeP20c8MrNk1-nwUxi-HPoOSrDFHu0/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsPQzf2jv51xxmK95GUcbNYVGodEzD1iLVR1VUFl-mAuwW1bAEBW_5Bqah3xbC7JTACSlR0nCu4wDxurfKm35wfdlFxJjx7S_KnKyum_nMNFSOhObwh6ok3kZRlmScElGSoGb7ewl1J4/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>

7. selesai