Cara Memasang Menu Navigasi Slide Out Di Blog

Penulis coxelgokil pada Kamis, 28 November 2013 jam 07.02

Aneka macam menu sudah sering kita pasang di blog elain untuk mempermudah mencari daftar isi juga sebagai penghias tampilan blog seperti yang akan kita bahas kali ini gimana cara pasang Menu navigasi slide out DI BLOG.

Simak cara berikut ini :

Login dulu ke blogger.com.
Masuk rancangan lalu Edit HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah.
Cari kode ]]></b:skin>.

/*----------------

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:brown;

    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/AVvXsEiC7o9V4P0FgoZrqQ6ma__Rt1hWidbWtcEtYHrXt3mYBIQvfyr6z7vwcr-GiVcfwOwQK81o9Aw-gfe3qmiIQ2kafJijy4nW1n0jWxe5Fh7_ONFTvXlrgA2qKplLSjij-FC-5QToOYqmmqw/s1600/home.png);

}

ul#navixed .about a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLsS1iI-59ba6kHWLD6kleWukzlybVSyIC3YFHnB6VxXxxeLdhg7eiDomYLTVtVy501sCTFYrLv4EtUFzfUUz2sowOBkNTOQaiSErcBgeP9L0IVx1oPv6_4gu9MjYSbTIOYtxk6od8Qds/s1600/id_card.png);

}

ul#navixed .search a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3WiGpZPtlY4Ccpm80APaTFqnfKj1Tqop-ulbl2t9raYqayCaSKAVwBI7DhNsvp9ksTT4oDIl7L4PuJY4TuslqqULedAnSur7YpW1HZYsCL04mZsahuJY02knPjmOwXSzpXo0CQlzdFGs/s1600/search.png);

}

ul#navixed .podcasts a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztviK6p8GGSgL2h8Id2dN0evwGstqgrQjIs0gJ68jbn0umvNIunsfm_BHSyWx860x4qhMNSX1t9c7eflalqkysNT0N3Rd-VpZcRDuI0AJHkg4td6FSuKNlpKXQpzh-gDXBtMbpKS1Be4/s1600/ipod.png);

}

ul#navixed .rssfeed a   {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQz0peYPEACU7oT2twTHwXaSfx1ZclS93-ykEcvstuhqfI6sRvvDoD7nWFRoD_dl7JYLTgATifk7W6QGDnfk70ykG4lpTDJU_2RrBKWF5rkLlJuQ_71vA3zG67yXuGXcDjCqQtqe2t5yY/s1600/rss.png);

}

ul#navixed .photos a     {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MAPvzRnftUxbZtOgJ_eTY4j6oL1EIMXrre8w3g_d3GDZc7a887cEJSqounMccO_Apz8FbkqbJr1tYj-KbmS5E2GRMnHKeQNyrcT7WqHqxhzMHykY16xrEXQBTC-G8Y6P1f5LbjSj3wI/s1600/camera.png);

}

ul#navixed .contact a    {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_WsVPAjeUYtPvx_zrrp3Suv3QJ_TP3OBRLyofJWvW07haEBmFTu-QATtOa2vhih4EShACDg5pMsYpApS4tv0BY6UBhbd3eYPhWCXhjagdiUJ462J7xWZHd-4l-0FT38zAR3ZU4Vvrj0/s1600/mail.png);

}

Lalu cari kode </head> lalu masuk kan kode Script di bawah ini tepat di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

    <script src='http://kangmahfid.googlecode.com/files/jcolor.js'/>

<script type='text/javascript'>

            $(function() {

                var d=300;

                $('#navixed a').each(function(){

                    $(this).stop().animate({

                        'marginTop':'-80px'

                    },d+=150);

                });

               $('#navixed > li').hover(

                function () {

                    $('a',$(this)).stop().animate({

                        'marginTop':'-2px'

                    },200);

                },

                function () {

                    $('a',$(this)).stop().animate({

                        'marginTop':'-80px'

                    },200);

                }

            );

            });

        </script>

Cari kode </body> lalu masukkan kode di bawah ini tepat 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>

Selesai jangan lupa Save Templat.

Note : Tidak semua template bisa menggunakan Menu navigasi slide out ini...Tetapi mencoba kan lebih baik dari pada tidak sama sekali.

Sumber : http://www.fullblogdesign.com/2012/01/pasang-menu-navigasi-di-blog.html

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Memasang Menu Navigasi Slide Out Di Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...

<a href="https://acibudaya.blogspot.com/2013/11/cara-memasang-menu-navigasi-slide-out.html"
  target="_blank">Cara Memasang Menu Navigasi Slide Out Di Blog</a>

Author : Aci Budaya - [Blog Lain]

Share this article :