How To Install Fixed Menu Slide-Out Navigation

♥ ASSALAMUALAIKUM ♥

Good morning all, .. this morning after opening my blog, I looked there is someone left message on my chatbox Again..Said “ wow! mcmana mau buat yg pages di atas tu jadi begitu ?. lawaaaa ^^ yg home, about tu. ajar ^^ “  Its about how to install Fixed menu navigation just like mine.Since I did not want to disappoint her, after all she was one of my WSB's Family..

Lucky day today is Saturday,not as much office work to do..This day tutorial requested by Adik Khansyaa @ IP .

How to do it ;

Log In Blogspot @ Click to Dashboard> Layout> Edit HTML> Tick Expand Widget Templates [make sure you first backup your template before  start of this tutorial ... if not so at least you already have backup template. Refer to the image below


Find the code ]]></ b:skin by using the box find [Ctrl + F].

Copy and paste the code below, on or before the code ]]></b:skin

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#ffffff url(Your Link Image) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsDYCsX-Pp4BUJYnVAvDlt_MX9p2flzZ6uqv2kWOJcnxNFQJK7l006QE8gKiiuZ4IGbkR-m6C9TU8HLQY9D0XjdU0ilDmEa5KTcgAAHHPWDmchyphenhyphenmaOVZRy_u-c5sYnNHiFzh_PUmv0Mc/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45tvVFI9PxPXc9j9jNej1V6vpuBMgSJbeulTy2uHbt6DRtq1Rd4ivDlmv838pClNt0vfjjEJbJIbt_UFtvmpABek03H7X-j0-h6-Iyr4YvhvTFNJ_kQIlY04EvsiIpalwCFOKTm5bSQY/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5AnnuqrlBvGKhzLL9G_wj9SQS90UprupILFI4jobSgX01l2Fs_mBvDXkkzt2u14b-FW7SQUI-0sBsZ7T4PL88jWD4ARXPocEJeVgaKlZEKu-yNXDvLp7uEjWH9xCUUZ0wOxzDkp7cQc/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFbK1RPKpJg0Sbd5B0gW7GhxsWP4BbbuSWyYZ98gjB-GfQEVKRt2epqeTd7Hw2pX9ZNPKyaiHPezJz1QZfprCxs0IJw__2PM4BBFOQl6KqHKJcb3rZSD6nEuF8EBx6YrM9cRHbL50IuE/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1OauVJ4m4XI4Z0qQdbKFUZEQlyh0tj1KAvyjhTlMC_oo8BzbFEhciuMSY4XGRW_XhkGO0BbLbkU58jmEKRub8GHmKzjh2Pxl42A29yXGQcZv0Z68UefFDvu__suwGHExQWTCV7jQqQ/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGB8gpvba6-zfgEAcTdBlFF5Kbgn4q2-ZKDlwNvykurasxXGWohn15Ob4I1DYX2lrjer_f4lTamWUksg4nDyIGNE0ef1Kdv3MbC1reRWW_ytth4bDREWWiFO3TREXH6KC7bzsRFgYXV4/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEdrr1N1YOeQE8EyQjH8oT2jto_coVnrpiEchjlSPJixi6IhkDMuourB9jb7MMqHg-cAbvMPzCvCUHT8RdUxkFnVtVU_6qykikavpFl3PWn6iETks74GDCyTlgvbdqQiSUWSMZrDyoGcY/s1600/mail.png);
}

✿ #ffffff - you can change the colour whatever you want..Click Here

✿✿ (Your Link Image) - you have to put a link of your image in case you want a background when your mouse hover on the box

✿✿✿ #000 - you change according to your desired section.

✿✿✿✿ 1px solid #BDDCEF - Change the border size,Border Type And Border Color

✿✿✿✿✿ 11px - Change The font size

✿✿✿✿✿✿ #FFF - Change The Font size colur

And save this script below above the code </ head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://pinkdiva.googlecode.com/files/beautifulnavigation.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

Finally save the following code above the code <body>

<ul id='navixed'>
            <li class='home'><a href='Your Own Link'><span>Home</span></a></li>
            <li class='about'><a href='Your Own Link'><span>About</span></a></li>
            <li class='search'><a href='Your Own Link'><span>Search</span></a></li>
            <li class='photos'><a href='Your Own Link'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='Your Own Link'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='Your Own Link'><span>Podcasts</span></a></li>
            <li class='contact'><a href='Your Own Link'><span>Contact</span></a></li>
        </ul>

Note : Change the Url Link Of Your Own link.

Done ... preview if there’s no error then save the template.

Note : You can change the picture / icon as you like..Find it Here and Here

Sharing The Love :)