Membuat Back to Top Sederhana

Ads by Google
Yang dimaksud Back to Top di sini adalah sebuah tombol/link pada blog kita yang menuju ke bagian atas blog. Sehingga berfungsi untuk memudahkan pengunjung blog kita kalau-kalau mereka ingin kembali membaca untuk memahami artikel yang kita tulis.
Cara kerja Back to Top yang saya buat ini sederhana. Sebenarnya, apabila kita membuat link menuju "#" (<a href="#") maka link tersebut akan mengembalikan kita kembali ke awal saat halaman tersebut dibuka (ke atas halaman). Untuk lebih jelasnya, sobat bisa lihat tombol Back to Top milik saya, seperti itulah kira-kira cara kerjanya.
Nah, berikut adalah tombol Back to Top yang langsung bisa sobat pasang

<a href="#"/><img border="0" src="http://i1129.photobucket.com/albums/m511/blegedex/tooop.png" alt="http://rouens.blogspot.com" title="Back to Top" style="display:scroll;position: fixed; bottom:100px;right:20px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100";" onmouseover="this.style.opacity=0.5;" onmouseout="this.style.opacity=1;";"/></a>
1. Masuk dashboard akun blogger sobat, klik design, lalu page element.
2. Klik add gadget, lalu pilih html/java script.
3. Copy paste kode di atas lalu save.

Keterangan:
Angka-angka berwarna merah adalah angka-angka yang dapat diubah sesuai keinginan sobat.
~Untuk mengganti gambar tombol sesuai kreasi sobat, silahkan ganti url http://i1129.photobucket.com/albums/m511/blegedex/tooop.png dengan url gambar mulik sobat
~bottom:100px; artinya jarak antara link Back to Top sampai ujung bawah sebesar 100 pixel.
~right:20px; artinya jarak link Back to Top sampai ujung kanan sebesar 20 pixel.
~onmouseover="this.style.opacity=0.5;" artinya tingkat ketajaman saat kursor diarahkan pada gambar adalah 50%.
~onmouseout="this.style.opacity=1;" artinya tingkat ketajaman saat kursor tidak diarahkan pada gambar adalah 100%.

{ 8 comments... read them below or add one }

Belajar dan Mencoba said...

wis mantap gan.. nice share.. :)

Rouen said...

seep :)

GLace TIng said...

Hello, I visit and give your full support and please support me back. Thank you in advance.

Admin-Wahid Sahidu said...

langsung di coba masbro

Rouen said...

mangga :D

awal said...

Makasih ya mas admin....

Dede Thea said...

boleh juga nih tutornya

Putra Wahyu said...

makasih :D

thanks yah atas kunjungannya

Post a Comment

Rules:
~Jangan melakukan Spam
~Berkomentarlah tentang artikel yang sobat baca
~Mohon maaf kalau ditemukan spam, atau komentar OOT (Out of Topic), komentar terpaksa saya hapus

Note:
Jika anda memposting pertanyaan atau request, mungkin saya tidak dapat langsung menjawabnya. Untuk mendapat notifikasi ketika pertanyaan atau request anda dijawab, silahkan login ke akun google anda, lalu klik SUBSCRIBE BY EMAIL di bawah kotak komentar dan notifikasi akan dikirimkan ke email anda.