Tertarik ingin mencobanya ikuti cara pembuatannya sebagai berikut:
* Seperti biasa login ke blogger terlebih dahulu
* Masuk ke Rancangan dan Edit HTML
* Tekan F3 dan cari kode <head> letakan kode dibawah ini diatas kode <head> atau sebelum kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayablogdemo/floa/jquery.easing.1.3.js' type='text/javascript'/>
* Langkah selanjutnya cari kode ]]></b:skin> dan letakan kode CSS dibawah ini diatas kode ]]></b:skin>
<style type="text/css">
body{margin:0; padding:0;}
#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
#fl_menu .label{padding:10px 20px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px; float:left; margin:1px 0 0 1px;}
#fl_menu .menu{float:left;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; margin:1px 0 0 1px; padding:10px 20px; text-decoration:none; float:left;}
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}
</style>
* Kalian bisa ganti kode warna #000 dengan kesukaan kalian
* Dan Langkah selanjutnya cari kode <body> letakan kode dibawah ini diatas kode <body>
<div id='fl_menu'>
<div class='label'>MENU</div>
<div class='menu'>
<a class='menu_item' href='http://shofisanjaya.blogspot.com/'>Beranda</a>
<a class='menu_item' href='http://alamat-url'>Tentang Saya</a>
<a class='menu_item' href='http://alamat-url'>Daftar isi</a>
<a class='menu_item' href='http://alamat-url'>Software</a>
<a class='menu_item' href='http://alamat-url'>Antivirus</a>
<a class='menu_item' href='http://alamat-url'>jQuery</a>
<a class='menu_item' href='http://alamat-url'>CSS3</a>
<a class='menu_item' href='http://alamat-url'>PHP</a>
</div>
</div>
* Ganti http://alamat-url dengan alamat url kalian masing masing
* Dan langkah terakhir Encode kode dibawah ini di situs centricel.com disini
* Caranya cukup mudah copy kode dibawah ini dan Encode di situs tersebut
* Setelah di Encode letakan kode yang di Encode tadi diatas kode <body>
<script> //config $float_speed=1500; //milliseconds $float_easing="easeOutQuint"; $menu_fade_speed=500; //milliseconds $page_load_fade_delay=2000; //milliseconds $closed_menu_opacity=0.75; //cache vars $fl_menu=$("#fl_menu"); $fl_menu_menu=$("#fl_menu .menu"); $fl_menu_label=$("#fl_menu .label"); $fl_menu_item=$("#fl_menu .menu .menu_item"); $(window).load(function() { menuPosition=$fl_menu.position().top; FloatMenu(); $fl_menu_item.delay($page_load_fade_delay).fadeTo($menu_fade_speed, 0, function(){$fl_menu_item.css("display","none");}); $fl_menu.hover( function(){ //mouse over $fl_menu_label.stop().fadeTo($menu_fade_speed, 1); $fl_menu_item.css("display","block").stop().fadeTo($menu_fade_speed, 1); }, function(){ //mouse out $fl_menu_label.stop().fadeTo($menu_fade_speed, $closed_menu_opacity, function(){$fl_menu_item.css("display","none");}); $fl_menu_item.stop().fadeTo($menu_fade_speed, 0); } ); }); $(window).scroll(function () { FloatMenu(); }); function FloatMenu(){ var scrollAmount=$(document).scrollTop(); var newPosition=menuPosition+scrollAmount; if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){ $fl_menu.css("top",menuPosition); } else { $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing); } } </script>
* Simpan dan lihat hasilnya
1 komentar:
nice info gan, langsung ke TKP neh..) btw link udah dipasang terima kasih ..:)
Post a Comment