Cara Membuat Tombol Back To Top (Kembali Ke Atas)

Cara Membuat Tombol Back To Top (Kembali Ke Atas) - Untuk membangun sebuah blog, tentunya ada banyak sekali elemen-elemen dan unsur yang harus kita bangun, seperti header, footer, sidebar, navbar, content-wrapper, dan lain sebagainya, namun, anda juga perlu menambahkan beberapa utilitas atau tools-tools pelengkap yang dapat membantu dan mempermudah pengunjung dalam menjelajahi blog kita, seperti tombol share, widget social media, hingga tombol back to top atau kembali ke atas yang akan saya bagikan pada kesempatan kali ini.

Pada hakikatnya, Tombol back to top atau kembali keatas ini berfungsi untuk mengembalikan tampilan layar komputer para pengunjung ke bagian paling atas blog kita kembali, jadi pada saat mereka membaca artikel yang bisa 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 membuat loading blog anda semakin berat.

Untuk mengetahui kode css dan html sekaligus pemasanganya di blog lebih lanjut, dibawah ini saya sudah siapkan tutorial sederhana tentang bagaimana cara mudah memasang atau membuat 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), lalu letakkan kode dibawah ini tepat 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/AVvXsEgHm3SJzQ_hKvFWPGqqM2gVzVb2QckLLSzsfSEEkaYmpchwFMsBFVQhr762n0Y4QVDNtejNbvhjEtIQgU2CmaGZA8jLOE5STXefV6nOgBvxiKQ5GvknHGhnX2buAGRhI7MS9qT4YYj2Ssk/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 adalah URL gambar dari Tombol Back To Top 
• Kode yang berwarna biru adalah jarak tombol Back To Top dari kanan layar

5. Masih di Edit HTML, cari kode </body>, lalu letakkan kode dibawah ini tepat diatasnya.

<!--Tombol Back To Top by farespo.blogspot.com start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> <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>
<!--Tombol Back To Top by farespo.blogspot.com end-->

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

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

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

Sumber Referensi : Making Different

Tweet