Cara Pasang Tombol Back To Top di Platform Blogger

Back to top adalah tombol bantu untuk scroll ke atas dengan sekali klik dari mouse (pakai komputer/laptop) atau jari (di smartphone) dan biasanya banyak kita lihat pada website yang diletakkan di bagian pojok bawah halaman, dimana berfungsi untuk mempermudah pengunjung melakukan scrolling pada halaman blog/web dari bawah keatas.

Kali ini admin Andisyam memenuhi permintaan dari sobat AH-SITE Blog yang mempertanyakan cara memasang back to top animasi ringan dan responsive seperti yang saya punya. Sebenarnya mudah saja disini sobat tidak perlu mengedit template, cukup memanfaatkan css dan script lalu menempatkan pada sebuah widget. Untuk mempermudah berikut cara menambah back to top pada blogspot beserta langkahnya:

1. Login ke akun Blogger sobat kemudian pilih menu Layout.

2. Kemudian pada Elemen Laman tambahkan sebuah widget kemudian pilih HTML/JavaScript atau sobat bisa memanfaatkan widget yang sudah ada tentunya yang berada pada bagian bawah (bottom).

3. Lalu copy dan pastekan code berikut pada widget yang barusan sobat tambahkan:

<style>#back-to-top{background:#E73037;color:#ffffff;padding: 4px 12px 10px;font-size:20px}.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}</style><div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>&#8593;</a></div>
<script>$(window).scroll(function() {if($(this).scrollTop() &gt; 200) {$(&#39;#back-to-top&#39;).fadeIn();}else{$(&#39;#back-to-top&#39;).fadeOut();}});$(&#39;#back-to-top&#39;).hide().click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false;})</script>

4. Kemudian simpan dan lihat hasilnya.

Selain di widget, sobat dapat menempatkan kode diatas pada template sobat, dengan cara yang sama:

1. pilih menu Theme > Edit HTML kemudian cari kode ]]></b:skin> atau </style>, lalu copy paste di atasnya:

#back-to-top{background:#E73037;color:#ffffff;padding: 4px 12px 10px;font-size:20px}.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

2. Cari kode </body> yang selanjutnya tempatkan kode script tepat diatas kode </body>:

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>&#8593;</a></div>
<script>$(window).scroll(function() {if($(this).scrollTop() &gt; 200) {$(&#39;#back-to-top&#39;).fadeIn();}else{$(&#39;#back-to-top&#39;).fadeOut();}});$(&#39;#back-to-top&#39;).hide().click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false;})</script>

3. Jangan lupa kode tersebut diparse terlebih dahulu, untuk mudahnya sobat bisa menggunakan tool parse ini, kemudian simpan template sobat.

Sobat juga dapat memodifikasi atau merubah warna tampilan button back-to-top pada kode CSS-nya agar lebih cantik dan sesuai dengan background template sobat. Bisa juga dengan membuatnya bulat dengan tambahan kode css: border-radius:100% pada #back-to-top{}.

Begitulah caranya, semoga tombolnya sesuai dan berjalan dengan template yang sobat gunakan. Terimakasih sudah berkunjung.