Kode Tombol Back to Top Simple untuk Blog Blogger

Baca Juga

Cara memasang Tombol Kembali ke Atas (Back to Top Button) Simple untuk Blog Blogger

BACK To TOP button atau tombol kembali ke atas adalah salah satu widget, elemen, atau fasilitas blog yang memudahkan pengunjung kembali ke bagian atas halaman tanpa harus scroll mous. Dengan sekali klik atau "tap", halaman otomatis bergerak menuju paling atas.

Tombol Back to Top ini menjadi salah satu trend desain website/blog yang kian membuat blog jadi ramah pengguna (user friendly).

Kode Tombol Back to Top Simple untuk Blog Blogger berikut ini tergolong simple dan fast loadng, murni kode CSS/HTML tanpa kode javascript yang memberatkan loading blog.

Cara memasang Back to Top di Sidebar Blog

1. Template > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan
3. Masukkan kode berikut ini ke dalam kolom konten.

<style type="text/css">.backtotop a:hover {background:none;}</style>
<div class="backtotop">
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top">
<img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULzrDpJ-I7L4BW6ex7Zc75oiM3MRutaV67tToQK2u8b2whc526s2rpjGMKwXYXoisNU8Pnp8NCeOxNmTREhxj5ahgvTmeeQLHNjt5i2eOZo6QByJI1LzXYINHKi6f4oa5zCqbk8-3S-w/s1600/button-back-to-top.png" alt="Back to Top"/></a></div>

Kode Back to Top lainnya (yang digunakan blog ini):

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR2bd95UeUQJ08NzX1ffQTjCb_VftnsBtJXIOwVAz24AU1LLQsy_2mqmIWFHEMkdo90Wh8GYjt5YBYPZL4T48VtcwuuzYDi-vEZbkREvqgOlOSkjQur8mEupca7Gk7iiJ7nAQygPVRVrW/s1600/back+to+top+(2).png"/></a>

4. Save!


KODE LAIN BACK TO TOP
Ini kode yang dipasang di blog ini, lebih fast loading, karena tanpa gambar.

Cara pasangnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<span class='back-to-top'><a href='#'> &#8593; </a></span><span class='back-to-top-a'><a href='http://blogromeltea.blogspot.com/' target='_blank'>bloging tips</a></span><style>.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}</style>

3. Save Template!

Tombol Back to Top mestinya sudah tampil di blog Anda. (http://blogromeltea.blogspot.com/).*