Membuat "Link Back To Top"

Bayangkan jika anda mengunjungi website atau blog dengan halaman yang panjang sampai capek untuk scroll ke akhir halaman, kemudian setelah selesai anda ingin kembali lagi ke halaman paling atas. Umumnya visitor akan scroll halaman secara manual kembali ke halaman paling atas, cara ini kurang efektif. Tips berikut ini akan memudahkan visitor untuk dapat lompat ke halaman paling atas tanpa harus scrolling (menggulung) mouse secara manual.

Syarat yang diperlukan adalah menambahkan tombol atau link yang mengarah pada halaman paling atas. Tambahkan sedikit modifikasi pada kode css & html, untuk pengguna blogspot ikuti langkah mudahnya seperi di bawah ini;

1. Login ke account blog anda.
2. navigasikan ke 'Layout' (Tata Letak) => Pilih tab 'Edit HTML'.
3. Cari kode "]]></b:skin>" dan kopi pastekan kode di bawah ini diatas kode "]]></b:skin>" ;

#atas {
bottom: 5px;
right: 5px;
position: fixed;
}

Atur penempatannya sesuai keinginan anda, "bottom:5px; right:5px" maksudnya jarak dari batas paling bawah 5 pixel, paling kanan 5 pixel. Jika ingin menempatkan pada tempat lain tinggal atur posisinya dengan perintah "bottom, right, left, top" kemudian sesuaikan jaraknya. Misal jika ingin menempatkannya pada bagian halaman pojok kanan atas tuliskan kode ini;

#atas {
top: 5px; /* 5px optional sesuaikan dengan angka anda. */
right: 5px; /* 5px optional sesuaikan dengan angka anda. */
position: fixed;
}

Pojok kiri atas ;

#atas {
top: 5px;
left: 5px;
position: fixed;
}

Pojok kiri bawah

#atas {
bottom: 5px;
left:5px;
position:fixed;
}

Kemudan tinggal menambahkan linknya, dapat berupa gambar ataupun hanya sekedar anchor link. Jika ingin menambahkan gambar caranya seperti di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/></a>
</div>

Ganti alt image 'Kembali Ke Halaman Paling Atas' dengan kata-kata anda sendiri. Jika anda lebih memilih memakai gambar (image), upload gambar anda ke blogger kemudian gantikan alamat url image di atas dengan alamat url image anda. Jika hanya ingin menggunakan anchor link, pakai kode ini:

<div id='atas'>
<a href='#' title='Kembali Ke Halaman Paling Atas'>Paling Atas</a>
</div>

Jika ingin pakai keduanya, tulisan dan gambar pakai kode di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/><br/>Paling Atas</a>
</div>

Selanjutnya copy dan pastekan kode di atas tepat di atas tag "</body>" ==> Terletak di bagian 'Edit HTML' hampir paling bawah. Selesai, Klik 'Save Template' (Simpan Template), lihat hasilnya.