Membuat Link Back To Top

Bayangkan jika anda membuka suatu website atau blog dengan halaman yang sangat panjang sampai terasa capek untuk scroll ke akhir halaman, kemudian setelah selesai anda ingin kembali lagi ke halaman paling atas. Apakah anda akan membuang waktu untuk scroll keatas lagi, hal ini tentunya tidaklah efektif. Sebenarnya ada cara yang mudah dan cukup simpel untuk langsung dapat lompat ke halaman paling atas tanpa harus scrolling (menggulung) mouse secara manual.

Yang harus anda lakukan adalah menambahkan tombol atau link yang mengarah pada halaman paling atas. Tambahkan sedikit modifikasi pada kode css & html, untuk pengguna blog 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 baris paling bawah 5 pixel, dari paling kanan 5 pixel. Jika ingin menempatkan pada tempat lain tinggal atur posisinya dengan perintah "bottom, right, left, top" kemudian sesuaikan jaraknya. contoh 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 tulisan. 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/AVvXsEi2grx1MWWyCb7QpteiZ6SIWhw9PWOVUK8j-IdF9CcKhtJIIb2F9OqiLw8NDAJnbqGpLWiytQX4Q3N8NfEar1zsmyi0NYJda_j9RBBFJ4eZS-5qzQjY1x1cfvwhnzDEkl5lnkI4IR7S_tg/s320/terbang.gif'/></a>
</div>

Ganti alt image 'Kembali Ke Halaman Paling Atas' dengan kata-kata anda sendiri. Jika anda punya gambar (image) sendiri, upload gambar anda ke blogger kemudian gantikan alamat url image di atas dengan alamat url image anda sendiri.

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.