Friday, January 20, 2012

Pasang menu navigasi slide out di blog

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 untuk jelas nya lihat langsung contoh nya di sini dan untuk membuat nya :
  •  login dulu ke blogger.com
  • masuk rancangan lalu Edit HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah.
  • Cari kode ]]></b:skin>

    Lalu pasang kode Css berikut tepat di atas nya :
    /*----------------
    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/AVvXsEh5X8JtBcC5v6vYblkcFogR4EU1eTsq1FDkfBTmQsee454lXJx3Rd9VRPh3Z4udw-80ca5c4cLrcoBaT-zOFx2F-GjB6jPsWPyPh6AlhdJLJjSnqrkgUf-WlHEzJxWLizn45WYLPcWUuyc/s1600/home.png);
    }
    ul#navixed .about a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuDwrhf6EgBy7JNRU_uWgZsQd1DIfh08zFv5KXYdsxSds8thw3NTkdp9L0WWu2sseffSRXe_uX4HGE3ywMmOE2gv4T17XcDciV2Q9U_93utdrtvcJMvEKZl_WaL7Cs_oqOcLWPp56kK8/s1600/id_card.png);
    }
    ul#navixed .search a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLjmVu6CSSGgcIqSE3TaQw-istcPXblGO0vNLtyvZjSZdqGpRB2HJS-TlFl2VohCtAoka5irYIbf8pSKbNgTCdsVm_fgMRWeYRqOys4ppymK1SCsnQoXdWlE8OFD4Va4lz5wVPMIlN2M/s1600/search.png);
    }
    ul#navixed .podcasts a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qxtoxNYWqvWPD7ejrpQUBVRi8oFOJ32aHY9qsZVp5k59qooruUo1YzW6H5vMWQKebElLPX4fRvkr_K0TMStGt1RPWdBMwVtFoCp86QHEUr7YfHSIC2byF-vA2Of-KvAmL6h8eJkA2bU/s1600/ipod.png);
    }
    ul#navixed .rssfeed a   {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0Eb_LGTyaRyzrJEajiKCf8qHfc03mRK2Sy1oI4mD8-70ziQES8eolk_9LOLOBl5HJc15T6mBnq9w3OMec97kQNaXF2JGqarh0Ui0n63tsV0AFRkoMNN3Eawp5PHLNkSJdsDXou0lTi0/s1600/rss.png);
    }
    ul#navixed .photos a     {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEngW0jS7BnL0OFya7ib1jmwcZdsKqhMGynyhumTewOuCGnXxb4zd_pYsVdPzr8w8T3RLr55fXOtJjm2XM06P5OSpOYRMLVCdj3MAslzBMAEw60GWBNA6F7W4nhel_FP_Q5vwQG7aMVw/s1600/camera.png);
    }
    ul#navixed .contact a    {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwhIbzTGOAvZUjGuh548_NDbqsHDCeX0iGlpbjPeqAXICFuh69jNFyVhFWbg65gWFaMlGHX4_D54hE4cJfWiAbHow321zx6zvh5KRbLiQdR9pljiT3r1OpDqs-9Dm7vXLF70J-P1F1k8Q/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;
                    $(&#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>
  • eitttt....mau kemana bos masih belum selesai ....cari dulu 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>
  • Nah baru yang ini dah selesai jangan lupa Save Template
Note :Tidak semua template bisa menggunakan Menu navigasi slide out ini...Tetapi mencoba kan lebih baik dari pada tidak sama sekali
at

No comments:

Post a Comment