Floating menu for your blogger blog

Now i,m going to tell you that how to create floating menu for blogger i posted about many menu's in my previous post's But this one is really good and beautiful because it float in left sidebar and whenever user scroll down the page it automatically float with it and it create and ease for user to go on any page and it make easy to navigate any thing on your blog . It make your site user friendly . below we added demo picture and demo link also you can easily take decision for adding it.

Floating blogger menu 

You can also check out this widget's demo on our demo site 

So, you seen that how beautiful it is . I know you want to add it to your blog. Follow my steps to add it to your blog.

Steps

1. Goto your blogger dashboard > Teamplate

2. Edit html and find    ]]></b:skin>

3. now add below code just above the ]]></b:skin>

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVjOU78EJEOuL7mGvuqIRUn0Q-q-EcFzUa3aBEkM54PcoPzHxDAxXYNwquSX0QvkX30W9XRwvv1O_98zEag4bybjMEFSl3G_GxoVkLwXTTnW2EpbX7l1-3mW-cbvw2_9Reiktm9EpOnw/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCli-4BwSR_auEAYkApGKYmORXPnL1QxrrwpmOvkg2R_eXicDyLUKu9F1kxtqZR6ic06kcaWvURQ9xcfhCeyj7leTqc4bLyrw0qg8_Car-lA7J5lqiyzLggkURDp01aCWsrAAKEGYMqZA/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81P3pTtx8U8NSasLWJntYPmchjuc-27qiGL5f01kflFVFmb5ig5nVVOBSzoN2HA0xKIX2D5Vl2lQQXuGxQH6knUBZFj_twzGQ7vPLu6TJbUiPy5ybXR-k8dtK2fTof3kKU5jffx6UKqc/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALfE3O0mIF5dabBSUPJ1xNaAhjNC2DJLg79GBO39R7No-MvjtnJqV7KEG3T11PATN5y6hN9qh6fLaScrylrsEvPO_4J9QQexxb6dhKXVistL9juaT9kENNhc70XYchyAOOtGZT32KUJ0/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtXxqAHvgwBEa8H0AGdiBAThE2aAbNvhq6TVq8JuVbRnAbI_zP7d3igUsCyZMkeq_X7Y4m1PHcXOiPnPqtzXW5bZOIXFc4jVjJnnZRTtgfuh_12kBSJ1rIazIycFIouCpn-0W2b_tws2o/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwlU7t5r7F0Uz6wsiTUR0_z7hFmBTEYa9haXpj3fx6tHkglH5JryaXXbbv9XR81LjbQPcjqrK8dsqnE5-CMWJ5TCyUBdH4ZPTa_BEcmf3rfzvxPx1B7UMM2_qL3o8lnZ_WvZdczZwEYVM/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibXQUyrkHGLmwd5YoT01_cfJKLZPrkeH20Gudf7crwsdUDAG8D2vqfS33e06rZHjjY-a2J4UZWGkKPA34uxv8cPF-JqKufXhfZPWRZANY-RxQnG0d3skhULxO2qBiVCHke_yu9qm8ez8o/s1600/mail.png);
}

4. now find </HEAD>  and paste below code just above </HEAD> tag

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

5.  Now find <BODY> and paste below code just below it.

<ul id="navigation">

            <li class="home"><a href="#" title="Home"></a></li>

            <li class="about"><a href="#" title="About"></a></li>

            <li class="search"><a href="#" title="Search"></a></li>

            <li class="photos"><a href="#" title="Photos"></a></li>

            <li class="rssfeed"><a href="#" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="#" title="Podcasts"></a></li>

            <li class="contact"><a href="#" title="Contact"></a></li>

        </ul>  

Now replace # with your links and Replace there titles also.

Note : please share it with your friends