Belajar membuat template blogger dengan bootstrap semakin menampakan hasil. Kita sudah berhasil membuat menu navigasi responsif, search menu, sidebar dan lainnya. Tahap selanjutnya kita akan belajar membuat back to top bootstrap.
Cara yang dipilih tetap menggunakan Bootstrap karena lebih mudah. Apalagi melihat contoh dan penerapan langsung di mdbootstrap. Website tersebut termasuk rujukan yang baik dalam belajar selain di getbootstrap. Teman-teman yang ingin akses langsung silahkan berkunjung ke sana.
Adapun yang saya lakukan hanyalah menyalin dan menempatkan sesuai struktur kode di blogspot. Cara ini saya persembahkan untuk pemula yang belajar desain web secara otodidak. Salah satu tujuannya agar bisa mengetahui baris kode sumber yang menjadi referensi. Serta perbedaan penempatan baris kode tersebut ketika dimasukan ke dalam theme blogger.
Ada yang tertarik belajar membuat back to top icon bootstrap pada theme blogger? Simak bahasan kali ini tentang cara bootstrap menambahkan tombol back to top di theme blogger.
Cara Bootstrap Menambahkan Back To Top Icon di Theme Blogger
Back to top icon adalah sebuah tombol yang berada di bagian bawah yang berfungsi sebagai jalan pintas untuk menuju halaman paling atas. Biasanya, tombol ini terletak pada bagian kanan bawah. Namun ada juga yang menempatkannya di bagian kiri. Terutama bagi website yang penulisannya dimulai dari kanan ke kiri. Berikut ini tutorial selengkapnya cara membuat back to top bootstrap.
1..Pastikan theme sudah terpasang link berikut diantara tag <head> dan </head>
2. Begitu juga tautan berikut yang diletakan sebelum tag </body>.
3. Setelah itu pasang kode berikut untuk memunculkan tombol back to top. Letaknya disesuaikan dengan theme masing-masing. Namun pada contoh ini ditempatkan setelah baris kode </footer>.
4. Paste kode javascript berikut sebelum tag </body>.
5. Letakan kode css berikut diantara tag <b:skin><![CDATA[/* dan </b:skin>.
6. Simpan theme.
7. Hasil bisa dilihat seperti pada link demo di bawah ini.
Kesimpulan
Membuat back to top bootstrap sangat mudah dibandingkan cara biasa. Hanya saja hasilnya akan terlihat sangat sederhana. Karena icon yang digunakan bukan merupakan format gambar. Melainkan jenis huruf yang disertai border berwarna.
Dan sebetulnya hal ini bisa kita modifikasi sesuai keinginan. Namun demikian, saya pikir ini lebih baik meskipun terlihat sederhana. Karena kesederhanaan tersebut sangat bagus untuk performa sebuah website. Terutama dari sisi kecepatan website membuka halaman webnya.
Sekian bahasan kita seputar desain web secara otodidak dengan Bootstrap. Kali ini tentang cara bootstrap menambahkan back to top icon di theme blogger.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar