My Blog: Beautiful Navigation CSS dock menu on your blogger

Add the navigation CSS dock menu on your blogger If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.

Here I will show you how to implement it to your blogger page.

1. Please Login your blogger acount

2. Template , Edit Html
3. Save This CSS before ]]> section:

    /* ---------------

    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/AVvXsEiY_5pXCgK7b0PSQymZI0B4kbI3hBca3S_OjtdZRgncHSMVCYVLhD7DNQs_Dn-CB9S_ZmBsYr9QHoUCR_T2Dk38qIZcdUREnFTYRdro90IKVOy6cJPYjL9IR2mkqfGH5v5btet5OYIBIFs/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/AVvXsEivx_f6GdaG59RYjzGRzlj0SmJ7GFXH7fNAoG8hdIZDIXunNK08HQY39Rn-t-Fw99LdSbHFxgzWnVQ3QZmFFet1SJ0GMjyT1T4kkRR3aeiflwLBfAvKyES1f8UUVP_q1EBIPsERDKD5SHU/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. Save this java script before section:

5.Now put this script before section:

6. Save Template 7. How to add this menu to Html (Posting, Template Or Gadget), put this code: CSS Dock Top Menu :