√ Cara Menciptakan Tombol Back To Top (Kembali Ke Atas)

tombol share, widget social media, hingga tombol back to top atau kembali ke atas yang akan aku bagikan pada kesempatan kali ini.

Pada hakikatnya, Tombol back to top atau kembali keatas ini berfungsi untuk mengembalikan tampilan layar komputer para pengunjung ke bab paling atas blog kita kembali, jadi pada dikala mereka membaca artikel yang dapat dibilang cukup panjang, mereka tidak perlu 'repot-repot' nge-scroll di scrollbar, tampilan akan secara otomatis kembali ke atas. Selain itu, tombol back to top ini juga ramah ukuran kok, jadi tidak akan menciptakan loading blog anda semakin berat.

Untuk mengetahui instruksi css dan html sekaligus pemasanganya di blog lebih lanjut, dibawah ini aku sudah siapkan tutorial sederhana ihwal bagaimana cara gampang memasang atau menciptakan tombol back to top (kembali ke atas) di blog.

Cara Membuat Tombol Back To Top (Kembali Ke Atas)

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> (gunakan CTRL+F), kemudian letakkan instruksi dibawah ini sempurna diatasnya.

/* Kode css Tombol Back To Top by farespo.blogspot.com */
.button_up{ padding:7px; /* Jarak Antara Border dengan Ikon */
background-color:white;
border:1px solid #CCC; /* Warna border */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGXkbwwBbKpSfjGQgvHDzk3_EO1CXGVtYKfE7sdSKecZ9XGogYjqTr1tqpW7inMmSPvZ8IB13SoM8dDdVRehpTcoEJWtZ37_TLoNBmyoTSskRuK_aLXdwBmfUELyNsGL7i77yxzZcGRbw/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Lebar Tombol */
height:20px; /* Tinggi Tombol */
bottom:280px; /* Jarak dari bawah */
right:5px; /* Rubah right menjadi left apabila anda menginginkan letak tombolnya di kiri */
white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

Keterangan:

Kode yang berwarna merah yaitu URL gambar dari Tombol Back To Top
Kode yang berwarna biru yaitu jarak tombol Back To Top dari kanan layar

5. Masih di Edit HTML, cari kode </body>, kemudian letakkan instruksi dibawah ini sempurna diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/j4vascript'/> <div class='button_up' id='button_up' 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'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script>

Keterangan: Jika pada template anda sudah ada instruksi jQuery menyerupai instruksi yang berwarna merah (versi berapapun), maka instruksi yang merah dihapus saja.

6. Klik "Save/Simpan" Template, dan selesai

Demikian info terbaru tentang Cara Membuat Tombol Back To Top (Kembali Ke Atas), simak juga artikel menarik lainya seputar tutorial dan tips trik blog ihwal Cara Membuat Widget Berlangganan Email Subscribe Blog, supaya bermanfaat, dan selamat mencoba.

Sumber Referensi : Making Different

Sumber http://farespo.blogspot.com