Navigation CSS dock menu di blog

Lagi banyak tugas nih bero xD maklum lah kelas 9 lagi sibuk Ujian praktek :)
Yaudah langsung ajah sekarang aku mau share navigation CSS dock menu di blog tau gk ? kalo gk tau liat di gambar di bawah ini !

Dock menu di blog 

Hmm.. hampir sama kayak RocketDock di dekstop PC nih liat dekstop Laptopku !

oke bagi yang mau pasang di blogya silahkan ikuti tutornya !!



1. Login ke blogger, gk punya akunnya ? bikin dulu, males ? mending jangan pasang haha xD

2. Pergike Template > Edit HTML

3. COPAS CSS di bawah ini, dan simpan SEBELUM kode ]]></b:skin>

/* ---------------
Menu navigasi CSS Mac  Dock top with jQuery
---------------------------------- */
/* dock - top */
.dock {
    position: relative; 
    height: 50px; 
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPeWmTo6MkZ9maa1_YNxqcoxLWEXEmHdaZgkxutxxrehbEW-FDHGBFEpXq9byEfnuWff9a4RPdu7owrIGlVsQWc5Mg9JPoaPDS7t45gGQ1dqJNR8SezbkKyQoarksSmTJlwyXOqQlgus/s1600/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;
}

/* dock2 - bottom */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: relative;
    left: 0px;
}
.dock-container2 {
    position: absolute;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfXx8OL44EZUTFD0WdOaOL1Y5FJKteVaAa2QEoRaF11HwSGSYgLsK1P5FpMubYDpKg-iAeFa2McK3AP8maQSabqMpKHWARYZmHrz8VWodiX4UFtAjv0u1oapJVdQXtFtXBKokIII19UE/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.  COPAS lagi sekarang simpan SEBELUM kode </head>

<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>

5. Satu lagi, sekarang simpan SEBELUM kode </body>

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

</script>

6. Klik simpan Temlplate

Jika sudah, sekarang pergi ke Tata letak >> tambah Gadget >> HTML/JavaScript
COPAS lah script di bawah ini !

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIcN9ok9VC30UsEhANShszPrW4-bOmAByFg7rCOPGvuYI-oNT0dSRjjbVw_e20nMMajRsLBJxv7WkhGdAf1ZMAfEx5X-yUSWt8M1e1VYUlDdt4hp8PcKS-vf3yk0hVOxb_kgVHO7rpqso/s1600/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWq1YWarLz_kr9wySbjz4za9aaLKHfKQ3K0fARfnQQtzrcFlS9GAgnVOPSSsKnKkGrRVq4lVh0-ArIIjGNIAWuzO2yq52RxOLhQKq45_OOozkhsxyCZ3EV_jJmU7q3pA5iSxiNYGR3WU/s1600/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEehkeIjEcLw-oSj2wUcAb46sq__Sc6vS9r1gh7AjGJzDkNvKnQMybKRThPDUgI-vibWyg7worvK00ZRCV8APi2ax5HSo_51E4u7BQPUclfBwPq0T9GgPRWZBa5sm32S7nhCnmr3mQJzU/s1600/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLELvGvCAdSP-h7JI66gQzBf13D8wO7MVfIyTmSGBirLzlOwTuHMi1QDlOYI-PDyfanFI60iWfn2KnNWpaRcGUCf-iqy1l2dnsPmzRpfQ5vX1vNZt0ngtmNWz1usTxUg60SniyFRA3TE/s1600/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAu1hpv2TSSBqKQVav3G6REaiGeH57kU4DQwvBzlWRNj98SJJ4W_ZJko1AiLZjA1TALS5KaNdKryCUUjkwQYRji7JodnVwiF5YShRXtKZ1U4dREs3D-BGxW_MY5DJIybslVcYSMCJEdY/s1600/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3tIhOw1WNA3z9DdSw_w2Qyb7LgnuPlA1LKWbpUaNHhwMOV_Hl-X4vdUGe3C1ESLUmpQK3KCzfVDTd-ZnBrl-IIcynRqi4y9JUXm-7x4RBEBvNXumoCp5DfXSf5HsgIekZStfmFh_NJU/s1600/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFF1JEw6Nrqxv0-m74sXjHfBxXLJXDPqf2W5gqMCOhkhG00ITaskgiHmAwkQqEFpB3eMDHS4HrLbKRuymDiKozCHWQ5D_m5lMjGEIi1M1plC-JhF39yPTEsqh89gb3Ew3fUukg_HMsVrs/s1600/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeEbg73i80kJ8Q3s8xFCfn1Ee2kacdETdQV0aNSy5eGZi7ozm7Tkl_I2G3xD4w3kKgSZqcvVu7dZSSLY28a-khCFye4MQ03LY7bg59CF4gIx8loTtsk-nzJ4surpN2rGbyR3HhhJnEdbw/s1600/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN2vkb4PPPTB1QsGfNbQLi7ijs6Pj4oHBg6-tUxUmk7TK1sSJed0urCZN362Ip2y11p5iR4KEHth6lkUyzxpZAhHZFlfqsGWyPStoqYakgRYe7a24Phoa7ynDrwUIpS19aA4ZeuoUGi0M/s1600/rss2.png" alt="rss" /></a> 
  </div>
</div>

 NB : Tanda Pagar Biru "#" silahkan ganti dengan Link sesuka mu !

Nah kalo yang warna biru itu Link gambar, mau di ganti atau gk juga Gpp !

kalo udah di edit-edit Klik SIMPAN, cek deh blogmu xD

yaudah segitu aja, semoga bermanfaat, mohon maaf kalo agak GJ maklum Niubi !! >.<