Posting lama tombol jQuery back to top hanya menawarkan satu arah ke laman ATAS webpage. Kali ini saya ingin posting tombol jQuery back to top lain, yaitu tombol Back to Top plus tombol Back to Bottom disertai fade-In and fade-Out effect. Pengunjung blog dapat segera kembali ke atas dan ke bawah halaman. Dengan efek fade-In dan fade-Out ini, kedua tombol akan memudar sedikit ketika kita menggulir ke atas atau ke bawah halaman.
Ada 2 tombol dengan posisi FIXED di bagian kanan-tengah webpage, masing-masing dengan fungsi untuk bergerak sebagai pintasan baik ke paling bawah atau ke paling atas webpage secara otomatis. Jika Anda menggulir halaman, kedua tombol akan lenyap sehingga memberikan efek bagus dan halus. Saya temukan widget bagus ini dari Helpblogger, maka penghargaan penuh layak diberikan kepadanya.
How To Install the Widget To website blog Blogger?
- Buka Blogger–>Template—>Edit HTML
- Tekan tombol keyboard CTRL + F untuk mencari ]]></b:skin> dalam HTML Editor blog
- Copy dan paste kode CSS berikut ini, dan letakkan tepat diatas ]]></b:skin>
CATATAN
Kedua tombol ditampilkan di sisi kanan web page. Jika ingin menampilkan di sisi kiri, ganti saja teks warna merah right yang ada di 2 tempat dengan Left. Anda bisa mengganti image tombol Arrow-Up (link warna biru … /arrow_up.png) dan Arrow-Bottom (… /arrow_down.png) dengan URL image lain.The Javascript - website archives
Script Javascript dibawah ini akan berfungsi menggulung (scroll) halaman blog menuju ke atas dan bisa juga ke bawah dengan menggunakan jQuery. - Kemudian Tekan tombol keyboard CTRL + F untuk mencari </body>
- Copy dan paste script code di bawah ini dan letakkan tepat diatas </body>
CATATAN PENTING
- Jika blog sudah ada jQuery plugin, HAPUS saja teks warna merah di atas.
- Mohon maaf HANYA saya tampilkan kedua snippet diatas dalam bentuk image gambar untuk mengurangi script (code) yang tidak bagus untuk SEO dan berpengaruh ke loading time blog ini. Untuk mendapatkan kedua snippet (script) tersebut silahkan download DISINI.
- SAVE TEMPLATE
- SELESAI!
Related Post : jQuery Scroll to Top Control : Cara balik ke Top Page
DEMO : Dapat Anda lihat sepasang 'arrow to Top' dan 'arrow to Bottom' di blog ini di sebelah kanan bawah halaman web.
That's all we know - Happy Blogger - Good Luck!!!
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
