30 January 2014

Membuat Tombol Back To Top Melayang

Fitur navigasi back to top ini berfungsi untuk perintah cepat agar pengunjung bisa kembali ke bagian atas halaman blog dengan tidak menggunakan fungsi scroll, tapi hanya cukup satu klik dengan menekan tombol back to top.

Tombol back to top pada template blogger ini berjenis melayang (floating) letak posisinya pada bagian pojok kanan bawah.  Script ini dibuat berdasarkan perintah link menuju ke main wrapper (#), dan kode ini tidak menggunakan javascript/jquery.

Dalam peragaan atau demo kita menggunakan gambar dibawah ini;


Cara memasang tombol back to top melayang sebagai berikut;

1. Copy kode dibawah ini;

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpAwx64dFLYmMhmR4uujsoo3cX_bBrl4VaZcuYnMGz07mvq_qvZ6JSjuBXkHmcPDiSKqZI_enfofc0-wPs3qscS2qU4SvBn87eYgPySM23DNgSsr67LI97GFHxNZlIJaKkZ4vhv9UX8iE/s1600/backtotop.png" /></a>

Ganti kalimat warna merah dengan kata yang diinginkan. Ganti warna biru dengan url gambar back to top yang sampeyan kehendaki.

2. Buka Dasbor > Tata Letak > Klik Tambah Gadget > Pilih  opsi HTML/Javascript.
3. Letakkan kode tersebut didalamnya, lalu simpan.

Lihat Demo...



Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

2 comments:

  1. Nowus sam atas infonya.. :D
    salam kenal..

    ReplyDelete
    Replies
    1. Arema salam satu jiwa.... nowus kelab, semoga tidak bosan berkunjung..

      Delete

Berkomentarlah yang bijak, iklan/spam langsung dihapus