Cara Membuat Tombol Back to Top Sederhana dengan HTML 2018

SPOTROID - 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 sobat gunakan untuk membuat back to top ini, namun terkadang cara yang diberikan teman-teman blogger kita yang lain agak sedikit ribet dan membingungkan.

Tapi sobat 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 sobat 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


Materi Back to Top yang spot berikan disini memiliki loading yang sangat cepat, jika sobat tanya kenapa? Karena tombol ini spot buat tanpa menggunakan gambar, hanya HTML dan CSS saja jadi tidak akan berpengaruh pada loading blog sobat, halaman blog sobag 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 sobat pada menu tap kiri pilih Tema, kemudian pada preview template klik Edit HTML, selanjutnya sobat cari kode </body>. Setelah kode tersebut ketemu, kemudian sobat salin kode HTML di atas dan sobat 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



Gambar 2



Gambar 3



Sekarang saatnya memasukkan kode CSS di atas dengam cara seperti ini: pada edit template sobat 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 sobat.

Nah begitulah cara membuat tombol kembali ke atas (bak to top) yang ringan fast loading.

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.