728x90 AdSpace

Latest News

16 Mei 2012

Butang Keatas Dan Bawah Yang Menarik

Sila lihat demo

Langkah 1:Pada New Blogger Dashboard---> Klik Drop Down Menu Untuk Blog Anda --->Pilih Template --> Bawah screenshot blog---> pilih "Edit Html" -->Kemudian pilih proceed.

 Langkah 2:Seterusnya pastekan kod dibawah ini diatas/sebelum kod ]]></b:skin> 

/* Butang Kembali ----------------------------------------------- */ .nav_up{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://lh6.googleusercontent.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; left:30px; white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .nav_down{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://lh6.googleusercontent.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; left:70px; white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
Langkah 3:Seterusnya pastekan kod dibawah ini diatas/sebelum kod </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='nav_up' id='nav_up' style='display:none;'/> <div class='nav_down' id='nav_down' style='display:none;'/> <script> //<![CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#nav_up').fadeIn('slow'); $('#nav_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'1'}); }); $('#nav_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#nav_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script>
Save.
Butang Keatas Dan Bawah Yang Menarik
  • Blogger Comments
  • Facebook Comments

2 ulasan:

Top