Membuat menu Fixed Horizontal berbasis jQuery

* Login ke blogger
* Masuk ke rancangan dan pilih Edit HTML
* Copy kode jQuery dibawah ini sebelum atau diatas kode <head>

<link href='https://sites.google.com/site/jayanaktkj/simplepopup/demo.css' media='screen' rel='stylesheet' type='text/css'/>


<link href='https://sites.google.com/site/jayanaktkj/simplepopup/osx.css' media='screen' rel='stylesheet' type='text/css'/>


<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/fixedmenu/style.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

* Terakhir cari kode <body> dan letakkan kode dibawah ini sebelum atau diatas kode <body> ini kodenya:

<div class='header'/>
        <ul id='navigation'>
            <li class='home'><a href='alamat url'><span>Beranda</span></a></li>
            <li class='about'><a href='http://www.blogger.com/profile/10996701309860975254'><span>Tentang</span></a></li>
            <li class='search'><a href='alamat url'><span>Cari</span></a></li>
            <li class='photos'><a href='alamat url'><span>Foto</span></a></li>

            <li class='rssfeed'><a href='alamat url'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='alamat url'><span>Podcasts</span></a></li>
            <li class='contact'><a href='alamat url'><span>Kontak</span></a></li>
        </ul>
<script src='http://tympanus.net/Tutorials/FixedNavigationTutorial2/jquery-1.3.2.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

0 komentar:

Kaskus Only
:ilovekaskus :iloveindonesia :kiss :maho
:najis :nosara :marah :berduka
:malu: :ngakak :repost: :repost2:
:sup2: :cendolbig :batabig :recsel
:takut :ngacir2: :shakehand2: :bingung
:cekpm :cd :hammer :peluk
:toast :hoax: :cystg :dp
:selamat :thumbup :2thumbup :angel
:matabelo :mewek: :request :babyboy:
:babyboy1: :babymaho :babyboy2: :babygirl
:sorry :kr: :travel :nohope
:kimpoi :ngacir: :ultah :salahkamar
:rate5 :cool :bola

by Pakto
:mewek2: :rate-5 :supermaho :4L4Y
:hoax2: :nyimak :hotrit :sungkem
:cektkp :hope :Pertamax :thxmomod
:laper :siul :2malu: :ngintip
:hny :cendolnya

by misterdarvus
:maintenis: :maintenis2: :soccer :devil
:kr2: :sunny