Cara Membuat Tombol Back to Top Sederhana dengan HTML 2018
Cara membuat back to top (kembali ke atas) di Blogger. Ini adalah cara paling mudah untuk membuat tombol kembali ke atas di blog Blogger tanpa menggunakan kode JavaScript. Fungsi tombol ini adalah untuk memudahkan pengguna untuk kembali ke atas (header) dengan sekali klik saja tanpa harus scroll beberapa kali (jika portingan yang cukup panjang). Jadi dengan dilengkapi dengan tombol ini pengguna tinggal klik saja tombol tersebut maka dengan sekejap mata langsung terlihat bagian paling atas atau kepala blog (header).
Sebenarnya masih banyak cara yang bisa kamu gunakan untuk membuat back to top ini, namun terkadang cara yang diberikan teman-teman blogger kita yang lain agak sedikit ribet dan membingungkan. Tapi kamu tenang saja karena trik yang saya berikan disini cukuplah sederhana dan mudah sekali dipraktekkan oleh siapa saja, bahkan walau terbilang masih pemula sekalipun.
Contoh yang akan saya tulis diartikel ini yaitu membuat back to top menggunakan kode HTML, namun jika kode HTML saja yang digunakan akan terasa seperti nasi tanpa lauk, nggak enak kan? Nah begitu pula dengan yang tombol ini, apabila tidak dihiasi dengan kode CSS makan tak indah dipandang mata pengguna.
Jadi begini, jika tombol back to top yang dibuat nanti dilengkapi dengan CSS bentuknya menjadi indah dan rapi akan sesuai dengan yang diinginkan. Selain itu dengan CSS kamu juga dapan mengatur ukuran, posisi, warna batas, warna latar, warna font serta ukuran font dll. Baiklah langsung saja sama-sama kita bergegas menuju ke lokasi sasaran.
Back to Top yang saya berikan disini memiliki loading yang sangat cepat, jika kamu tanya kenapa? Karena tombol ini saya buat tanpa menggunakan gambar, hanya HTML dan CSS saja jadi tidak akan berpengaruh pada loading blog kamu, halaman blog kamu akan dimuat seperti biasanya.
Kode HTML
Kode CSS
Pengerjaan
Kunjungi dasbor blogger kamu pada menu tap kiri pilih Tema, kemudian pada preview template klik Edit HTML, selanjutnya kamu cari kode </body>. Setelah kode tersebut ketemu, kemudian kamu salin kode HTML di atas dan kamu paste (tempel) tepat di atas kode </body> tersebut, (kode HTML di atas tanpa menggunakan tanda pagar merah #, jangan lupa untuk menghapus tanda # tersebut sebelum menyimpan template). Sabar dulu jangan terburu-buru simpan template karena masih ada kode CSS yang belum dimasukkan dalam template.
Sekarang saatnya memasukkan kode CSS di atas dengam cara seperti ini: pada edit template kamu cari kode ]]></b:skin> atau </style> setelah salah satu kode tersebut muncul, kemudian salin kode CSS di atas dan tempel (paste) tepat di atas salah sati kode ini ]]></b:skin> atau </style>, jika semuanya sudah beres jangan lupa untuk Simpan Template. Untuk melihat hasil tombol Back to Top nya silahkan kunjungi halaman blog Blogspot kamu.
Nah begitulah cara membuat tombol kembali ke atas (bak to top) yang ringan fast loading.
Sebenarnya masih banyak cara yang bisa kamu gunakan untuk membuat back to top ini, namun terkadang cara yang diberikan teman-teman blogger kita yang lain agak sedikit ribet dan membingungkan. Tapi kamu tenang saja karena trik yang saya berikan disini cukuplah sederhana dan mudah sekali dipraktekkan oleh siapa saja, bahkan walau terbilang masih pemula sekalipun.
Contoh yang akan saya tulis diartikel ini yaitu membuat back to top menggunakan kode HTML, namun jika kode HTML saja yang digunakan akan terasa seperti nasi tanpa lauk, nggak enak kan? Nah begitu pula dengan yang tombol ini, apabila tidak dihiasi dengan kode CSS makan tak indah dipandang mata pengguna.
Jadi begini, jika tombol back to top yang dibuat nanti dilengkapi dengan CSS bentuknya menjadi indah dan rapi akan sesuai dengan yang diinginkan. Selain itu dengan CSS kamu juga dapan mengatur ukuran, posisi, warna batas, warna latar, warna font serta ukuran font dll. Baiklah langsung saja sama-sama kita bergegas menuju ke lokasi sasaran.
Kode HTML dan CSS Buat Tombol Back to Top
Back to Top yang saya berikan disini memiliki loading yang sangat cepat, jika kamu tanya kenapa? Karena tombol ini saya buat tanpa menggunakan gambar, hanya HTML dan CSS saja jadi tidak akan berpengaruh pada loading blog kamu, halaman blog kamu akan dimuat seperti biasanya.
Kode HTML
<div id="btt">
<a href="#">
<span class="top">&#uuarr;</span>
</a>
</div>
Kode CSS
#btt{
background:#111;
border-radius:5px;
box-shadow:1px 2px 5px #bbb;
text-align:center;
position:fixed;
z-index:999;
right:10px;
bottom:20px;
width:25px;
}
#btt .top{
color:#fff;
font-weight:bold;
padding:10px 5px 10px 5px;
}
Pengerjaan
Kunjungi dasbor blogger kamu pada menu tap kiri pilih Tema, kemudian pada preview template klik Edit HTML, selanjutnya kamu cari kode </body>. Setelah kode tersebut ketemu, kemudian kamu salin kode HTML di atas dan kamu paste (tempel) tepat di atas kode </body> tersebut, (kode HTML di atas tanpa menggunakan tanda pagar merah #, jangan lupa untuk menghapus tanda # tersebut sebelum menyimpan template). Sabar dulu jangan terburu-buru simpan template karena masih ada kode CSS yang belum dimasukkan dalam template.
Gambar 1
Screenshot Gambar Pengaturan Tema Blogger
Gambar 2
Screenshot Gambar Edit HTML
Gambar 3
Screenshot Gambar Edit Tema / Template
Sekarang saatnya memasukkan kode CSS di atas dengam cara seperti ini: pada edit template kamu cari kode ]]></b:skin> atau </style> setelah salah satu kode tersebut muncul, kemudian salin kode CSS di atas dan tempel (paste) tepat di atas salah sati kode ini ]]></b:skin> atau </style>, jika semuanya sudah beres jangan lupa untuk Simpan Template. Untuk melihat hasil tombol Back to Top nya silahkan kunjungi halaman blog Blogspot kamu.
Nah begitulah cara membuat tombol kembali ke atas (bak to top) yang ringan fast loading.
0 Response to "Cara Membuat Tombol Back to Top Sederhana dengan HTML 2018"
Posting Komentar