Assalamualaikum.
Tombol Back to top biasanya digunakan untuk mempermudah pengunjung dalam membaca artikel dari sebuah blog.Dengan tombol back to top memungkinkan pengunjung kembali ke halaman atas hanya dengan sekali klik.
Metode pemasangan tombol back to top ini terbagi 2 diantaranya adalah dengan menggunakan jquery dan tanpa jquery.Perbedaannya adalah jika kita menggunakan jquery maka loading blog akan terasa berat namun tampilannya bagus,sedangkan tanpa jquery maka loading tidak akan seberat jika kita memakai jquery namun hasil tampilannya sangat sederhana.
Karena terbatasnya waktu,maka disini saya akan share cara membuat tombol back to top tanpa jquery terlebih dahulu,sedangkan cara membuat back top dengan jquery akan saya share di posting berikutnya insyaallah jika ada waktu,kesempatan dan umur.
CARA MEMBUAT BACK TO TOP DI BLOGGER TANPA JQUERY
1.Pertama-tama silahkan anda masuk atau login seperti biasa ke blogger.com.
2.Berikutnya silahkan anda klik Template > Edit HTML.
3.Berikutnya anda cari kode </body> (silahkan gunakan CTRL+F jika anda menggunakan komputer).
4.Berikutnya silahkan anda masukkan kode HTML berikut ini tepat diatasnya.
<span class='back-to-top'><a href='#'> ↑ </a></span> <span class='back-to-top-a'><a href='http://www.inisiteku.com/'>inisiteku</a></span> <style>Tambahan:
- Teks yang saya beri warna merah,silahkan anda ganti dengan URL blog anda.
- Teks yang saya beri warna biru silahkan anda ganti dengan judul blog anda atau sesuai dengan selera anda.
5.Berikutnya anda masukkan kode CSS berikut ini tepat dibawah kode HTML yang saya berikan pada langkah nomor 4.
.back-to-top{position:fixed;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a{font-size:10px;z-index:9999999;opacity:.2;position:fixed;bottom:0}
.back-to-top a{font-size:16px;background-color:#45818e;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:#283C48;text-decoration:none}
6.Berikutnya silahkan anda masukkan kode HTML penutup berikut ini tepat dibawah kode CSS yang saya berikan pada langkah nomor 5.
</style>
7.Terakhir silahkan anda klik save atau simpan untuk menyimpan perubahan.
Silahkan kunjungi blog anda,maka tombol back to top akan muncul di halaman blog anda.
Bagaimana? cukup mudah bukan?
Demikianlah cara membuat tombol back to top di blogger tanpa jquery,semoga bermanfaat dan terimakasih atas kunjungan anda.
Assalamualaikum.
Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan