Pasang menu navigasi slide out di blog

Pasang menu navigasi slide out di blog - Hallo Sob Jody Blog, artikel kali ini berjudul Pasang menu navigasi slide out di blog, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Pasang menu navigasi slide out di blog
link : Pasang menu navigasi slide out di blog

lihat juga


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/AVvXsEiqKYJqRcejkXlbIEcERbBPwv7ao8vpF8F53rAklaAvtWQ-5s4EjihWwD8Lzi5JdIl-EXaov6IPgtOAITICH4Tl9Fi6Kdi4GKGqspgpA0CTTss1kkE_S9992WbsIOW14O-dh_I9wUt_QdA/s1600/home.png);
    }
    ul#navixed .about a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisYHtSaL1bYvxN1biQuZ1gcTdHyUeOsoQqrFBRpEOfkE8E8G_zA1xOjYebkrmArfsN010qVPZSdqcdDXRQr_DGHS08BaE6ycU-VivE9X0LkjfGjlMLLRzlW-ongFYz8eVjkBjv7M15p4/s1600/id_card.png);
    }
    ul#navixed .search a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4lwkjlHXO_wJY02Jwt9-TY_ODqchB1F-LsvXHD9kwB4Pzt5qQOrpNniIguyo2A0_F2CGYPmPBm3amNxQa5VRtrmIwEihC_gNAFl6ZAc8dy33yo68u6tLakaQ-NYnVE5OrA334dzPC_Q/s1600/search.png);
    }
    ul#navixed .podcasts a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4hg7qqTWI4BpAiQaVP3O_Hjjbk_47W9xpnnK5XrLIYUTRTG_AfV7UVSCP_GcyBQV_CVYB0i_aMtjn7NCq-F2QGv8bSaoVOgJVEJbwgJfd2_b3jJ7sR5F3DEfYbt2BXb_9k0v69uccaE/s1600/ipod.png);
    }
    ul#navixed .rssfeed a   {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7h1B8zpwlTpPFS4H1a6RNEQsEOpG78PGkw1KAa17EOzSAol2RrKyJLuS8k6rOLfDTKrVnAp3WL3w0J4VV6ex_3yCVdh-12S4vlLWtFdHeExf8AqKKIm1pmVoPDQDRvDenwPQSTP27duU/s1600/rss.png);
    }
    ul#navixed .photos a     {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwwImB-hsmrpxU89_XhTFf9lanPKczahCQGeqStbqqs_4oFuR6bYArHuziHF-pMAIMIT0D81ZaL4id0cQEd2_FBVpmRNeJnPGmcSwS6gapYeAgNAoFdK7wzU4Vs_Whg8N5vKf5ZfYfhDo/s1600/camera.png);
    }
    ul#navixed .contact a    {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgeRxG63H-fOIsEpexh4hsXwHVz7Y55yGwtSnQYDwK9OZyupp1ZhrSeake52NCDi9JmuVgGvym7XVaG-k3WSKCDgtmJa96RPFXq_9tFqnE3xboL1HjxElcjBEbbp8yDuOywianAWm8TDo/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


Demikianlah Artikel Pasang menu navigasi slide out di blog

Sekian Pasang menu navigasi slide out di blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Pasang menu navigasi slide out di blog dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/01/pasang-menu-navigasi-slide-out-di-blog.html Semoga artikel ini bisa bermanfaat.

Related Posts :