Breaking News
Loading...

Cara Membuat Beautiful Slide Out Navigation di Blog

11.29
    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 
/*----------------
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/AVvXsEhZc6COeg4zbiaLTH960or5pdc0_cywk0qpVHiYCp0xciSBNI4E_7Op11nh9jmxKdSgjVrMHSmki6ORLUIzMJPkPe5LD3v0umtmQKXMwRoygTiIqjoMKrTiPuMOASW9uHxfqVXEYDVtI0Q/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrniUdSkafmjeILajipYpAw5q-PAxk-d1uBu0ae6KOIV7UxEzSlHi2xYrj5XFd2_LlqhEbhXpqwarKwmmm86PhybG5hfSH8yTVPzv1eOW-LVW025YfYe0o6uP6kbtI785lyatzrO43LqE/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9l4EIPWxLBmJ0VIyLQP6AW6oGbYs4J4PMO4uJbKb13EJflYzzydqQnipWyw-wAWR8vUZJQlMw3HemQuTJtaFEmO8_7T_VjRSrrAsTsQ0TcoIpxC2tDvMMFm5VuGBLXvHzFff4JcIjGk/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhijbzMpHj-gYc9qYyG8PYyGqB8nUqr7tYCNW36KKnUzk6JIVoBcp6147YR7o0v-tGieg7d_t-2NW0Wuq9rCCvgsqbokpwZC8hmhkgwZGHsZJE2veii9-d1YWf1JGgY41OR5Np16rmOQ/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUExIY2bZMknZvgEvckV8yXjXNwQKRGHM0SoYzxn8w-a9lutFRpcs8erQmSY_P9EuUSTyuZlt_SvF_0Tju_FWUlyxtCrBGN-Mc3wZ_GI-cdRjxQQCQ_VDtM5QOq8FSXY2VZVSprIrss8g/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6x77xRVgu-_lO_pC7-lqNSoo-0I9u7CAj38TPZtkjG0pieWJWdpVKSkqBh67jMD9ac3VUip25EPHUf5eaY3r-qj33r_ApOrdXCYJ3QIrtCDex0QhTjkTWzVjTwe_W_EKLZET7huPgqI/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgCAZkRZ8nTcH-CNPBfWye5vu39UU_T1WdFHKQEGrLufn_Qq5-mFR4XsSDSEjH4fCiQPvOXVEj7kNJY1YZ-e8eDZ1Bt-COi-97BvQ8S_sMce8sDeSU1BsF_Afd9mxt0QzK1ZNZgZ9-Ac/s1600/mail.png);

dan simpan script ini di atas kode </head> :

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

terakhir simpan cara pemanggilannya di atas 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>
ket : silahkan ganti # dengan link yang anda inginkan

selesai... jangan lupa simpan template...... 

Friend source : http://tipsbelajar-blog.blogspot.com/2011/04/cara-membuat-beautiful-slide-out.html 

9 komentar:

  1. wah iy ini kayak punyanny temen ku :D

    BalasHapus
  2. Mantap ne Tutorialnya, dicoba dulu smga berhasil

    BalasHapus
  3. Ini yang ane tggu dari duli2 Gan ,... hehehehe

    BalasHapus
  4. Boleh juga nih tutorial,,, Comot dulu kali ye,, hehe

    BalasHapus
  5. mantap niy, ane kasih real support biar selalu semangat buat berbagi ilmu

    BalasHapus
  6. nice...
    blogwalking...
    http://antechno.com
    visit back ....

    BalasHapus
  7. Suker banget kyaknya tak coba duluoe ahh...thx bro

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer