Cara Membuat Beautiful Slide Out Navigation di Blog

Cara Membuat Beautiful Slide Out Navigation di Blog - Tips Blog untuk mempercantik blog anda semakin banyak tersebar di dunia maya, contoh Cara Membuat Beautiful Slide Out Navigation di Blog. Efek dari slide out navigation ini menggunakan Jquery yang bagus dalam membuat hal slide begituan. Jadi pastikan anda mencoba anda agar mempercantik hiasan blog anda.

Disini saya akan bagikan cara pemakaiannya :

1. Buka Blogger anda
2. Pilih Rancangan -> Edit HTML -> Centang Expand Widgets Templates
3. Kemudian Cari kode script dan letakkan kode dibawah tepat diatas

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) 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/AVvXsEiUvmQ4PS0y2dlK-pBjDC4ikh2iCshEjCyPdlG5MmjO3NPYEBXwyEXGfGd0Xq2OTKCgzj2K9VUIPqT0s4DEQtLtAqBjIxcIg5WBfnxO9dIdGgZCnTOCoP-cGFE5ncuBQYVfVqoSplXxGVY/s1600/home.png);
}
ul#navixed .about a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDI9wxbWESpSDwZwr8bOrF2aaG5mI7lbYOzdCY-hEwyIcspfqtp8GylPtebfx9NZssOrSD35p2FdFPY-C5JgYdBcm6GGG26y6PYhH6nBxOpWl8ABHmF4Db5cIcoqORQWc7-0o0QhPdok/s1600/id_card.png);
}
ul#navixed .search a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRna7bu1a8P_ilPPtFtQ6ogpK9Td8EUxPX27qrCQViK8b2RiLXfzsKfkf8J99bFa_55aJNjWZgtvatpVyI78AJXRz5jhjCV4EniYDIufojbDUXyNyv_75n2AwQ3yMqI9lWY__pAiIrdhA/s1600/search.png);
}
ul#navixed .podcasts a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQbA7G_6HZbFBjA1lIf7RBZPEW24mVsQQ0AKW0dBZT2imN1pzb_IkYibNdWgvECGfn9HF6ch9sCeX4QUSr0mHLsW7WBgfr6Ti9LHslvLaMJLfU1mJz-9gXtOCP7zmcqhd1ISP5u25HeE/s1600/ipod.png);
}
ul#navixed .rssfeed a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMmZvhqA3TgKvMCwE3l51lnxSfl_fHay8qbXS2I0O_q8hYzzIC8Kwvwj1XogRcYAUbqdma62IzGEFbkIFHFFZCc2SvTB7I6rmpVEyNCpksPnowySY5TGirweiS-ScwzSqH0cBEZi-1Y7Y/s1600/rss.png);
}
ul#navixed .photos a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibn9jR9r9vd7hFJaR4lEx2iiH9r6sN08pu98zP0D0VF0H5j2yadDtJsO6mGMXNPKdINEPKUdu3HZ0pyhYwc7QlZ2cHtXOD1mRx55CaYBNlouHCMoymoioEAfXdBxS4GZycAdGFjee3cKg/s1600/camera.png);
}
ul#navixed .contact a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfi5wTYs2h6ctE0-oX0S__QvfXfjyzbdZ0XC_xD-Z8Bc2OTB5ke9vpFwxKPlxzKa9pJPz2xEl7kAB-p95iEnKQHabOoBFneIjhqmvJ0wbzxRDzuAOY-UX236Fob_Z6doqpHYQpCuxt7I/s1600/mail.png);
}

4. Setelah itu cari kembali kode script </body> dan letakkan kembali tepat dibawah kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://kangdadang.googlecode.com/files/jcolor.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>

5. Cari lagi kode script <body> dan letakkan lagi kode dibawah ini tepat diatas kode <body>

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

6. Save tempalate anda dan lihat hasilnya.

Note :*  # ganti dengan link anda masing-masing.

ref:http://hariopamungkas.blogspot.com