Cara Menciptakan Tombol Back To Top Pada Blog

TANKYSTREET - Ini yakni cara yang paling simpel untuk teman gunakan pada blog sobat.





#.Cara Pertama :
1. Login ke blog>>Dasbor >>Template>>Edit HTML>>Lanjutkan.
2.Setelah isyarat diatas ditemukan. Copy paste isyarat dibawah ini sempurna diatas isyarat </body>
<!-- Back To Top-Back To Down --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:15px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://i1086.photobucket.com/albums/j454/sudirman10/navigate-up-icthoncopy.png'/></a> <a href='#gotodown' style='display:scroll;position:fixed;top:5px;right:15px;' title='Back to Down'><img onclick='MGJS.goDown();return false;' src='http://1.bp.blogspot.com/-iCtYPl8WGw4/T974NQI-fQI/AAAAAAAAArI/vYVzeRmHhCM/s1600/navigate-down-icthoncopy.png'/></a> <a name='gotodown'/>
#.Cara kedua dengan penampilan yang berbeda :
Masuk Ke Blogger.

sobat Copy-Pastekan code Di bawah ini:

/* Tombol Atas dan Bawah Dengan jQuery ----------------------------------------------- */ .tombol_atas{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .tombol_bawah{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

Setelah itu Cari lagi isyarat "</body>" ( tanpa Tanda Kutip )
<div class='tombol_bawah' id='tombol_bawah' 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'); $('#tombol_atas').fadeIn('slow'); $('#tombol_bawah').fadeIn('slow');  $(window).bind('scrollstart', function(){ $('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'1'}); }); $('#tombol_bawah').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#tombol_atas').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script>

Setelah itu Simpan Template, kemudian silahkan teman lihat blog sobat.