.

Sunday, 6 January 2013

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
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


2 comments:

  1. Thank you for this helpful post bro! Indeed it's very interesting. :)
    Bloggerjin

    ReplyDelete
  2. nice :)

    http://www.myegy-tourism.com/

    ReplyDelete

© Copyright 2012, Template style of Haseeb malik - Design by Haseeb malik.