Cara Membuat Tombol Back To Top

Tombol Back To Top adalah membuat sebuah tombol kembali ke atas dengan efek geser yang halus ke atas bisa jadi merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat dengan tampilan dan sentuhan yang cukup elegan.

Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Sedangkan tombol ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya.

Bisa jadi jika sebuah blog yang sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidaklah memberatkan, serta tombol ini juga kompatibel untuk hampir kebanyakan browser/peramban.

Dengan kode tersebut dibawah anda pun dapat mengedit sebagaimana mestinya sesuai keinginan, seperti efek fade in dan fade out, serta gambar tombolnya.

Tutorial dibawah ini menunjukan cara membuat tombol back to top dengan mudah dan cukup singkat, hanya memerlukan waktu beberapa menit saja. Untuk Membuat Tombol Back To Top:

1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode </head> Tapi jika anda sudah menerapkan kode ini, maka lewati langkah ini. Kode dibawah ini sangat umum digunakan di berbagai blog dengan banyak versi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Catatan: jika telah ada maka lewati langkah diatas, tapi usahakan menggunakan versi 2.x

7. Masih di tempat yang sama – Cari kode </head>
8. Masukan script dibawah ini diatas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>

Keterangan script tombol back to top
Warna Biru adalah jarak tombol back to top muncul dan tersembunyi
Warna Hijau adalah kecepatan pada saat melompat ke atas

9. Cari kode ]]></b:skin> atau </style>
10. Masukan kode CSS dibawah ini diatas ]]></b:skin> atau </style> di bagian head.

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

Warna Hijau adalah posisi dari tombol tersebut.

11. Cari kode </body>
12. Masukan kode di bawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='//4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

Warna pink adalah link dari gambar tombol back to top, sebaiknya diganti / disave dan upload menggunakan tempat upload gambar masing-masing.
13. Save Template dan lihat hasilnya.

Demikian cara membuat tombol back to top dengan tampilan yang cukup menarik, semoga dapat bermanfaat.

Tags:

• Blogging

(1 votes, average: 4.00 out of 5) Loading...