My Blog

kali ini saya mau share cara bikin menu blog melayang di atas blog , karena ada yg nyaranin saya buat post ini, demi pengunjung apa sih yg gak. dah ah , sekarang ke caranya aja ya

1.Login Ke Blogger
2.masuk menu edit template, tunggu sampai selesai loading datanya
3. cara kata ]]></b:skin> dan masukan kode berikut di atasnya

#nav {

width: 100%;

font-size: 10pt;

margin: auto;

background: #FFFFFF;

-webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);

height: 50px;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

text-transform: uppercase;

position: relative;

}

#nav ul{

list-style-type: none;

z-index: 9;

max-width: 930px;

margin: auto;}

#nav ul li{

float: left;

position: relative;

padding: 12px;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;}

#nav ul li:hover a.menu{color:#fff;} 

#nav ul li:hover{

background:#161616;}

#nav ul li a:hover {

color:#fff;}

#nav ul li a{

color: #fafafa;

padding: 0 10px;

line-height:25px;

font-weight:bold;

font-size: 10pt;

display:block;

text-decoration:none;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;}

#nav ul li ul li{float: none;position: relative;}

#nav ul li ul{

position: absolute;

top:49px;

left:0;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

display:none;

background: #5d5d5d;}

#nav:hover ul li ul {width:150px;}

#nav ul li:hover > ul{-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;display:block; }

#nav ul li ul li a{line-height:25px;}

#nav ul li ul li ul{

position: absolute;

top:0; left:150px;

width:150px;

background: #5d5d5d;}

#nav ul li.selected a{font-size: 10pt;font-weight:bold;}

#nav ul li.selected {

color: #fff;

background: #161616;

font-weight: bold;

margin-left: 10px;

}

4.cari kode  <div id='wrapper'> dan letakan code berikut di atasnya

<div id="nav">
<ul>
<li class="selected"><a expr:href="data:blog.homepageUrl" href="http://www.blogger.com/blogger.g?blogID=3888079681869710859" title="Home"><i class="icon-home">  |Home</i></a></li>
<li class="selected"><a href="http://www.blogger.com/blogger.g?blogID=3888079681869710859#" title="Tuker Banner yuk"><i class="icon-off">  |Exchange Link</i></a></li>
<li class="selected"><a href="http://www.blogger.com/blogger.g?blogID=3888079681869710859#" title="Downlload Template"><i class="icon-download-alt">  |Template</i></a></li>
<li class="selected"><a href="http://www.blogger.com/blogger.g?blogID=3888079681869710859#" title="Tutorial Blog"><i class="icon-blogger">  |Blog</i></a></li>
<li class="selected"><a href="http://www.blogger.com/blogger.g?blogID=3888079681869710859#" title="Kontak Admin"><i class="icon-adult">  |Admin</i></a></li>
<li class="selected"><a href="http://www.blogger.com/blogger.g?blogID=3888079681869710859#" title="Daftar Isi Blog One"><i class="icon-sitemap icon-large">  |Sitemap</i></a></li>
</ul>
</div>

5.Cari kode </body> dan letakan kode di bawah di atasnya

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

    // Menentukan elemen yang dijadikan sticky yaitu .nav

    var stickyNavTop = $('#nav').offset().top;

    var stickyNav = function(){

        var scrollTop = $(window).scrollTop(); 

        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya       

        if (scrollTop > stickyNavTop) {

            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

        } else {

            $('#nav').css({ 'position': 'relative' });

        }

    };

    // Jalankan fungsi

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

Jika anda ingin membuat menunya ada gambarnya silahkan ikuti cara berikut

1.Cari Kode </head> dan lekatan kode berikut di atasnya

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kalo Ada yg tidak