Cara Membuat Tombol Back To Top Pada Blog

Tanky Street

TANKYSTREET - Ini adalah cara yang paling gampang untuk sobat gunakan pada blog sobat.

#.Cara Pertama :
1. Login ke blog>>Dasbor >>Template>>Edit HTML>>Lanjutkan.
2.Setelah kode diatas ditemukan. Copy paste kode dibawah ini tepat diatas kode </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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetXbk_9CopYvZbtCC8cGYnyiHjWe2HmSu5oCPrTh8LjxIoKQDTPoLxvfIn_0yN_wx9rBp9Coc5H9x7art_WcMt7YwOiOlCozENOLDMK1d32LZ-cNXXvOtaJ6xiYHKwKQh2v4nUVtf5M4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmnMvloG9R-8f4vC_qNNSRLho97lZTCpfN1RgB2diAxCGYN7jbZ6ucI0xhyChvVWLNGD-L1KswgUMhqBCtet9fvBw_gv-Of57GVN1kOSD5MA-quOrE4BWetaWKvsDWYhfwgjd6Kc4hxUk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxUOGpk2ocLfXpNhRy5avcbifgpk_TRJpnt2KhoLu2aXMyM-oq2S0FtHOZZSCfI3ekN1efKKm-FFWDSxR3wkBZ9GPZ-aTiIHtsJBENba8umwRCXbe8cRvpw7uRuUnl1D6xHbHLunBurcI/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 kode "</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, lalu silahkan sobat lihat blog sobat.

Read Also

Share this post

Get Link Facebook Messenger Whatsapp Whatsapp Twitter Telegram Linkedin Tumblr Pinterest

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.