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

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

/*----------------
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;
                $('#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>

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.

Pasang menu navigasi slide out di blog

lihat juga

Pasang menu navigasi slide out di blog

Demikianlah Artikel Pasang menu navigasi slide out di blog

Related Posts :