Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger
Cara Memasang, Menampilkan, atau Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger.
DI blog ini sudah banyak tutorial cara memasang tombol kembali ke atas (Cara Memasang Back to Top untuk Blogger Ringan Responsive.
Kali ini kembali CB share wacana cara memasang instruksi tombol kembali ke atas yang lebih oke, ringan, responsive, menggunakan Font Awesome.
Demonya mampu dilihat di Code Pen yang menjadi sumber instruksi Back to Top Button for blogger blog ini.
Tombol ini mengakibatkan blog kita ramah pengguna (user friendly) dan merupakan animo tambilan website masa kini. Back to Top Button ini memudahkan pengunjunh kembali ke halaman teratas blog dalam satu klik atau satu tap.
Desain tampilannya persis ibarat gambar ilustrasi di postingan ini.
KODE CSS:
Simpan di atas ]]>
Kode JavaScrip Tombol "Kembali ke Atas"
Simpan di atas instruksi
DI blog ini sudah banyak tutorial cara memasang tombol kembali ke atas (Cara Memasang Back to Top untuk Blogger Ringan Responsive.
Kali ini kembali CB share wacana cara memasang instruksi tombol kembali ke atas yang lebih oke, ringan, responsive, menggunakan Font Awesome.
Demonya mampu dilihat di Code Pen yang menjadi sumber instruksi Back to Top Button for blogger blog ini.
Tombol ini mengakibatkan blog kita ramah pengguna (user friendly) dan merupakan animo tambilan website masa kini. Back to Top Button ini memudahkan pengunjunh kembali ke halaman teratas blog dalam satu klik atau satu tap.
Desain tampilannya persis ibarat gambar ilustrasi di postingan ini.
Cara Memasang Tombol Kembali ke Atas (Back to Top Button)
1. Klik Theme/Tema > Edit HTML
2. Masukkan (Copas) tiga instruksi Tombol Kembali ke Atas untuk Blogger berikut ini.
Simpan di atas ]]>
#return-to-top{position:fixed;bottom:20px;right:20px;background:#000;background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all .3s linear;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}
Kode JavaScrip Tombol "Kembali ke Atas"
Simpan di atas instruksi