Penulis: Moch Adnan dipublikasikan: 19 Juni 2023
Diantara sederet navigasi yang patut kita pasang dalam halaman blog, saya rasa tombol back to Top adalah salah satunya. Setuju ya sob? Bukan karena apa, jujur saja saya pribadi juga kalo lagi mampir ke sebuah blog terkadang suka nyari-nyari "ini" tombol kembali ke atas tiap kali sehabis membaca dan menggulir hingga kebagian bawah artikel, terus ke bagian footer, tapi ketika gak menemukan tombol atau menu untuk kembali ke atas jadi agak kecewa juga. Seharusnya tinggal sekali klick saya sudah bisa kembali ke atas bagian artikel, tapi ini harus gerak-gerak jari lagi buat bisa sampai ke atas ☺    Gara-gara gak ada tombol back to top nya.
 
Ya sudahlah... Langsung saja nih, buat sobat yang ingin memasang/membuat tombol back to top di dalam halaman blog nya, mari lanjut membaca.
Membuat Tombol Kembali Ke Atas | Back To Top
Membuat Tombol Kembali Ke Atas | Back To Top

Baca juga: cara membuat bounce To Top di blogger

Membuat Tombol Kembali Ke Atas atau Back To Top di Blogger

Masuk ke dalam dasbord blog Pilih Tema, lalu pilih 'Edit HTML' Cari dan temukan kode

]]></b:skin>

(gunakan pencarian cepat)
 
Simpan kode CSS di bawah ini tepat di atas kode tersebut. 

.tothetopMAB:hover { cursor: pointer; }

Dan, masih dalam layar edit HTML, sekarang cari dan temukan lagi kode seperti berikut 

</body> 

jika sudah menemukannya simpan kembali kode Script di bawah ini tepat di atas kode itu.
  
<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {
	
	
	// Smooth scroll to the top	
    $('.tothetopMAB').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });

});

//]]>
</script>

Terakhir... Klik simpan, supaya hasil pengeditan tadi enggak hilang. Langkah terakhir adalah tinggal menempatkan menu 'back to top' ini.
 

Ada 2 opsi yang bisa sobat coba, ini antara lain menyimpannya dengan jalan bantuan widget HTML atau ingin menyimpannya di footer blog berdekatan dengan bagian copyright blog, silakan ditentukan saja. 

Untuk menu Back To Top ini, kode HTML nya adalah seperti berikut 

&amp;nbsp;<a class='tothetopMAB' title='To the top'>Back to Top &amp;uarr;</a>

Opsi 1: Menggunakan widget HTML 

Berikut adalah cara menyimpan menu/tombol back to top menggunakan widget HTML. 
Pilih "Tata letak" kemudian klik "Tambah widget" dan pilih "HTML" 
Biarkan kosong pada bagian judul, kemudian masukkan kode HTML diatas dan klik "Simpan". Tahan dan seret widget kemudian posisikan agar berada dibagian paling bawah.
 

Opsi 2: Menempatkan di Footer blog 

Menyimpan menu/tombol Back To Top ini agar berada di Footer blog adalah sebagai berikut: Pilih " Tema" kemudian pilih "Edit HTML" dan simpan kode tombol back to top diatas tepat setelah Tag atau copyright blog. Kurang lebih susunannya seperti berikut 
Membuat Tombol Kembali Ke Atas | Back To Top


Klik "Simpan" dan selesai. Hasil akhir dengan menggunakan opsi ke 2 akan terlihat sama persis seperti dalam Blog Moch Adnan ini. Lihat saja kebagian bawah sob.... 
Demikianlah cara membuat menu atau tombol back to top atau menu kembali ke atas untuk kali ini, selamat mencoba.