Membuat Menu Blog Melayang

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;
}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;}
list-style-type: none;
z-index: 9;
max-width: 930px;
margin: auto;}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;}
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;}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;}
background:#161616;}background:#161616;}#nav ul li a:hover {

color:#fff;}
color:#fff;}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;}
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;}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;}
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;}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; }
-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; }-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;}
position: absolute;
top:0; left:150px;
width:150px;
background: #5d5d5d;}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;

}
color: #fff;
background: #161616;
font-weight: bold;
margin-left: 10px;
}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

http://bloog-one.blogspot.com/2013/11/membuat-menu-blog-melayang.html

Membuat Menu Blog Melayang 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share This To :

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Membuat Menu Blog Melayang. Anda bisa bookmark halaman ini dengan URL https://mickeym4ru.blogspot.com/2013/12/membuat-menu-blog-melayang.html. Terima kasih!

Ditulis oleh: Unknown - Kamis, 26 Desember 2013